React初步学习 – 汪明鑫的个人博客

首先附上react的log

react的官网:

https://reactjs.org/

react是什么？

是一个js的库

支持服务器端渲染

React Native开发一套应用可以部署安卓和苹果

但用户体验不是多好，所以后来用的比较少

虚拟DOM是React中重要的概念

React可以操作虚拟DOM，不会重新渲染，真实DOM没有动

虚拟DOM可以转换为真实DOM,才会统一渲染，只用渲染一次（更高效）

会比较DOM变化的地方，只渲染变化的地方（局部渲染页面比重新渲染整个页面快）

React需要引入的js文件

<script type="text/javascript" src="../js/react.js"></script>
<script type="text/javascript" src="../js/react-dom.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

注意：要先引入react.js再先引入react-dom.js

也可以引入在线的js文件，使用cdn

https://www.bootcdn.cn/

再来了解下babel，下面是babel的官网

https://www.babeljs.cn/

babel可以把es6语句转换为es5语句

另一个功能就是转换react的语法

jsx专门用来写虚拟DOM

js引擎解析不了，得用babel解析

什么叫jsx?

JavaScript XML

react定义的一种类似于XML的JS扩展语法: XML+JS

作用: 用来创建react虚拟DOM(元素)对象

var jsx = <h1>Hello JSX</h1>;

注意1: 它不是字符串, 也不是HTML/XML标签
注意2: 它最终产生的就是一个JS对象

虚拟DOM最简单的一点可以在js里写html

来看看官网的hello world

我们来自己写一个Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>

  <script type="text/javascript" src="../js/react.js"></script>
  <script type="text/javascript" src="../js/react-dom.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>

  <div id="demo"></div>


  <script type="text/babel">

      console.log(ReactDOM);

      //在js里写html
      //render方法要传递2个参数   参数1：要创建的虚拟DOM   参数2：虚拟DOM将要放置的容器
      //注意：虚拟DOM会先转换成真实DOM，在放置参数2指定的页面的容器
      ReactDOM.render(<h1>Hello  World</h1>,
          document.getElementById('demo'));

  </script>


</body>
</html>

首先看一下我们打印的ReactDOM

render 是渲染的意思

虚拟DOM对象就是js对象

如何让创建虚拟DOM对象

创建虚拟DOM的2种方式:

1). 纯JS(一般不用):

React.createElement(‘h1′, {id:’myTitle’}, title)

2). JSX:

<h1 id=’myTitle’>{title}</h1>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>虚拟DOM</title>
</head>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<body>

<div id="demo"></div>

<script type="text/babel">

    let element = React.createElement('h1', {id:'element1'}, 'hello world');

    ReactDOM.render(element, document.getElementById('demo'));

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>虚拟DOM</title>
</head>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<body>

<div id="demo"></div>

<script type="text/babel">

    //1,初始化动态数据
    let remark = '666!';
    let name = 'xinye';

    //2,创建虚拟dom （js对象）: JSX
    let vDOM = <h1 id="myTitle" name={name}>{remark}</h1>;   // html里写js要加大括号

    //3,将虚拟dom渲染中页面元素中
    ReactDOM.render(vDOM, document.getElementById('demo'));

</script>

</body>
</html>

最后在写一个小demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<hr>

<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">
  var mylist= ['a', 'b', 'c'];

  ReactDOM.render(
    <ul>
      {
          //相当于返回一个新数组，数组的每个元素是一个li
          //遍历数组得有唯一的key
        mylist.map(function (item, index) {
          return <li key={index}>{item}</li>;   //html里写js要加{ }
        })
      }
    </ul>,
    document.getElementById('demo')
  );

 
</script>
</body>
</html>

显示结果：

再来看下上面的例子出现的map（）函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>map(runoob.com)</title>
</head>
<body>

<p>点击按钮获取数组元素的平方根。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}
</script>

</body>
</html>

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。