React介绍

虚拟DOM和diff算法

在学习 React 之前，我们需要先了解两个概念：虚拟DOM、diff算法。

虚拟DOM

问题描述：

假设我们的数据发生一点点的变化，也会被强制重建整颗DOM树，这么做，会涉及到很多元素的重绘和重排，导致性能浪费严重。

解决上述问题的思路：

实现按需更新页面上的元素即可。也就是说，把需要修改的元素，所对应的 DOM 元素重新构建；其他没有变化的数据，所对应的 DOM 节点不需要被强制更新。

具体实现方案：（如何按需更新页面上的元素）

只需要拿到页面更新前的内存中的DOM树，同时再拿到页面更新前的新渲染出来的内存DOM树；然后，对比这两颗新旧DOM树，找到那些需要被重新创建和修改的元素即可。这样就能实现 DOM 的按需更新。

如何拿到这两棵DOM树：（即：如何从浏览器的内存住哪个获取到浏览器私有的那两颗DOM树？）

如果要拿到浏览器私有的DOM树，那我们必须调用浏览器提供的相关JS的API才行。但是问题来了，浏览器并没有提供这样的API。既然如此，那我们可以自己模拟这两颗新旧DOM树。

如何自己模拟这两颗新旧DOM树：（即：如何自己模拟一个DOM节点？）

这里涉及到手动模拟DOM树的原理：使用 JS 创建一个对象，用和这个对象来模拟每一个DOM节点；然后在每个DOM节点中，又提供了类似于 children 这样的属性来描述当前DOM的子节点。这样的话，当DOM节点形成了嵌套关系，就模拟出了一颗 DOM 树。

总结：

虚拟DOM的本质：使用 JS 对象模拟DOM树。
虚拟DOM的目的：为了实现 DOM 节点的高效更新。

React内部已经帮我们实现了虚拟DOM，初学者掌握如何调用即可。

diff算法

怎么实现两颗新旧DOM树的对比呢？这里就涉及到了 diff算法。常见的 diff算法如下：

tree diff：新旧DOM树，逐层对比的方式，就叫做 tree diff。每当我们从前到后，把所有层的节点对比完后，必然能够找到那些需要被更新的元素。
component diff：在对比每一层的时候，组件之间的对比，叫做 component diff。当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置。
element diff：在组件中，每个元素之间也要进行对比，那么，元素级别的对比，叫做 element diff。
key：key这个属性，可以把页面上的 DOM节点和虚拟DOM中的对象，做一层关联关系。

React 介绍

React 是什么

Facebook 开源的一个JS库。
一个用于动态构建用户界面的JS库。

React 的特点

Declarative（声明式编码）
Component-Based（组件化编码）
Learn Once, Write Anywhere（支持客户端、服务器端渲染）
高效的DOM Diff算法，最小化页面重绘
单向数据流

React高效的原因

虚拟(virtual)DOM，不总是直接操作DOM
高效的DOM Diff算法，最小化页面重绘（即“局部渲染”）。

虚拟DOM指的是：在真实DOM的上一层映射一层虚拟DOM。我们操作的是映射关系，而不是真实的DOM。假设页面的样式做了修改（比如新增了一个标签），此时修改的是虚拟DOM的样式，真实的DOM并未发生变化。那什么时候，真实的DOM会发生变化呢？当我把所有的内容操作完之后，转化为真实的DOM，此时要打包统一的渲染页面，于是真实的DOM发生变化，然后渲染一次。这样做的话，可以减少页面的渲染次数。

生态介绍

Vue生态：Vue + Vue-Router + Vuex + Axios + Babel + Webpack
React生态：React + React-Router + Redux + Axios + Babel + Webpack

React 模块化、组件化

模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
理由：js代码更多更复杂
作用：简化js的编写，阅读，提高运行效率

组件

理解：用来实现特定功能效果的代码集合(html/css/js)
理由：一个界面的功能更复杂
作用：复用，简化项目编码，提高运行效率

模块化与组件化

模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化：当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

面向对象与面向过程的区别

面向对象编程：

重点是对象
更加关心的是干活的人

面向过程编程：

更加关心的是干活的过程
谁去干活儿不关心

React 环境搭建：写第一个Hello World

react.js 和 react-dom.js

为了通过 React 写一个Hello World程序，我们需要先安装几个包：

react.js: React的核心库。这个包，是专门用来创建React组件、组件生命周期等。
react-dom.js: 操作DOM的扩展库。这个包，主要封装了和 DOM 操作相关的包（比如，把组件渲染到页面上）。
babel.min.js: 将 JSX语法解析为纯JS语法代码。

方式一：本地引入相关的js库

如果你是刚入门的新手，我们建议采取方式一。

如果是本地引入的话，可以这样写：

    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

如果是通过CDN的方式引入的话，可以使用网站 www.bootcdn.cn/ 提供的CDN链接。

完整代码举例：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="myContainer"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">

      //页面中的真实容器元素
      var containDiv = document.getElementById("myContainer");

      //1、创建虚拟DOM对象
      var vDom = <div>Hello, React!</div>; // 不是字符串, 不能加引号

      //2、渲染虚拟DOM对象（将虚拟DOM对象渲染到页面元素中）
      ReactDOM.render(vDom, containDiv); // 参数1：虚拟DOM对象；参数2：页面中的容器
    </script>
  </body>
</html>

代码运行后，页面上的DOM结构如下：

<div id="myContainer">
	<div>Hello, React!</div>
</div>

代码解释：

render的中文含义是“渲染”。render 方法的语法如下：

	ReactDOM.render(要渲染的虚拟DOM对象, 容器 container：要渲染到页面上的哪个位置);

方式二：npm install

实际开发中，我们一般都是通过 npm install 的方式来安装 react 相关的包。

首先，新建一个空的文件夹2022-08-07-ReactDemo，作为项目的根目录。然后在根目录下执行如下命令，进行项目初始化：

  npm init --yes

上方命令执行完成后，会生成package.json文件。

然后继续执行如下命令，安装 react.js 和 react-dom.js 这两个包：

  npm i react react-dom

完整代码举例：

index.html:

main.js:

// JS打包入口文件

import React from 'react'
import ReactDOM from 'react-dom'

// 在 react 中，如要要创建 DOM 元素，只能使用 React 提供的 JS API 来创建，不能【直接】像 Vue 中那样，手写 HTML 元素
// React.createElement() 方法，用于创建 虚拟DOM 对象，它接收 3个及以上的参数
//     参数1： 是个字符串类型的参数，表示要创建的元素类型
//     参数2： 是一个属性对象，表示 创建的这个元素上，有哪些属性
//     参数3： 从第三个参数的位置开始，后面可以放好多的虚拟DOM对象，这写参数，表示当前元素的子节点

// <div title="this is a div" id="mydiv">这是一个div</div>
var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div');

// ReactDOM.render('要渲染的虚拟DOM元素', '要渲染到页面上的哪个位置');
ReactDOM.render(myDiv, document.getElementById('app'));

上方代码中，createElement()方法介绍如下：

  React.createElement(需要创建的元素类型, 有哪些属性, 子节点)

JSX语法介绍

JSX介绍

JSX的引入

如果直接让用户通过 JS 代码手动创建DOM元素，肯定是非常麻烦的。

于是，React 官方就提出了一套 JSX 语法规范，能够让我们在 JS 文件中，书写类似于 HTML 那样的代码，快速定义虚拟DOM结构。

JSX的全称

JSX：JavaScript XML，一种类似于XML的JS扩展语法。也可以理解成：符合 XML 规范的 JS 语法。

需要注意的是，哪怕你在 JS 中写的是 JSX 语法（即JSX这样的标签），但是，JSX内部在运行的时候，并不是直接把我们的 HTML 标签渲染到页面上；而是先把类似于HTML 这样的标签代码，转换成 React.createElement 这样的JS代码，再渲染到页面中。

从这一点我们可以看出，JSX是一个对程序员友好的语法糖。

JSX语法的本质：以 React.createElement 的形式来实现的，并没有直接把用户写的 HTML代码，渲染到页面上。

babel转换工具

如果要直接使用 JSX 语法，需要先安装相关的语法转换工具：

	运行 cnpm i babel-preset-react -D

这个babel包的作用是：将 JSX语法转换为 JS语法。

安装完成后，就可以开始使用JSX语法了。

完整代码举例：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="app"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">
      //页面中的真实容器元素
      var containDiv = document.getElementById("app");

      //1、使用JSX语法 创建虚拟DOM对象
      var vDom = (
        <div>
          Hello, React!
          <h2>这是标题</h2>
        </div>
      );

      //2、渲染虚拟DOM对象（将虚拟DOM对象渲染到页面元素中）
      ReactDOM.render(vDom, containDiv); // 参数1：虚拟DOM对象；参数2：页面中的容器
    </script>
  </body>
</html>

JSX的基本语法

（1）在 JSX内部写 JS代码：如果要在 JSX 语法内部，书写 JS 代码，那么，所有的JS代码必须写到 {} 的内部。在{}内部，可以写任何符合JS规范的代码。

例如：

	var myTitle = '这是使用变量定义的 tilte 值'

	// 使用JSX语法 创建虚拟DOM对象
	var vDom = (
	<div>
	  Hello, React!
	  <h2 title={myTitle + 'vae'}>这是标题</h2>
	</div>
	);

（2）当编译引擎在编译JSX代码的时候，如果遇到了<，会把它当作 HTML代码去编译；如果遇到了 {}，会把方括号里面的代码当作普通JS代码去编译。

（3）在JSX中，如果要为元素添加class属性，则必须写成className，因为 class在ES6中是一个关键字；和class类似，label标签的 for 属性需要替换为 htmlFor。

代码举例：

  // 使用JSX语法 创建虚拟DOM对象
  var vDom = (
    <div>
      Hello, React!
      <p className="henry">henry</p>
      <label htmlFor="" />
    </div>
  );

（4）在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹。

（5）如果要写注释，注释必须放到 {} 内部。例如：

	// 使用JSX语法 创建虚拟DOM对象
	var vDom = (
	// 这一行是注释
	<div>
	  Hello, React!
	  <p className="henry">henry</p>
	  {/*这一行也是注释 */}
	</div>
	);

最后，再举个例子：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="app"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">
      //页面中的真实容器元素
      var containDiv = document.getElementById("app");

      var arr = []
      for (var i = 0; i < 6; i++) {
        var p = <p className="myp" key={i}>这个是p标签</p>  // 注意这个地方的写法： key = {i}
        arr.push(p)
      }

      //1、使用JSX语法 创建虚拟DOM对象
      var vDom = (
        <div>
          Hello, React!
            {arr}
        </div>
      );

      //2、渲染虚拟DOM对象
      ReactDOM.render(vDom, containDiv); // 参数1：虚拟DOM对象；参数2：页面中的容器
    </script>
  </body>
</html>

创建组件的第一种方式

创建组件

在React中，构造函数就是一个最基本的组件。

如果想要把组件放到页面中，可以把构造函数的名称当作组件的名称，以 HTML标签形式引入页面中即可。

举例：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="app"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">
      // 这个构造函数，就相当于一个 组件
      function Hello() {
        return (
          <div>
            <h3>这是 Hello组件 中定义的元素</h3>
          </div>
        );
      }

      ReactDOM.render(
        <div>
          <Hello> </Hello>
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>
</html>

需要注意的是：

React在解析所有标签的时候，是以标签的首字母来区分的：如果标签的首字母是小写，就按照普通的 HTML 标签来解析；如果首字母是大写，则按照组件的形式来解析。

比如上方代码中，如果把大写的 Hello 改成小写的 hello，运行会报错，无法看到预期的结果。

结论：组件的首字母必须大写。

父组件传值给子组件

代码举例：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="app"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">
      // 父组件中的数据
      var person = {
        name: "henry",
        age: 18,
        gender: "男",
        address: "北京"
      };

	  // 在子组件中，如果想要使用外部传递过来的数据，必须显示的在 构造函数参数列表中，定义 props 属性来接收
	  // 通过 props 得到的任何数据都是只读的，不能重新赋值
      function Hello(props) {
        return (
          <div>
            <h3>这是 Hello子组件 中定义的元素： {props.name}</h3>
          </div>
        );
      }

      ReactDOM.render(
      	<!-- 注意：这里的 ...Obj 语法，是 ES6中的属性扩散，表示：把这个对象上的所有属性，展开了，放到这个位置 -->
        <div>
          <Hello {...person}> </Hello>
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>
</html>

上方代码中，我们是想把整个person对象传递给子组件，所以采用了...Obj 语法语法。传递给子组件后，子组件获取的数据仅仅只是可读的。

class 关键字的介绍

面向对象语言的三个特性：封装、继承、多态。多态和接口、虚拟方法有关。

class的基本用法：使用class创建对象

myclass.js:

// 以前学习的：使用构造函数创建对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function() {
  console.log("么么哒");
};
Person.info = 123;

var p1 = new Person("zs", 20);


// 本次需要学习的：class 后面跟上类名，类名后面，不需要加 () ，直接上 {}
class Per {
  // 在每个class类内部，都有一个 constructor 构造器， 如果没有显示定义 构造器，那么类内部默认都有个看不见的 constructor
  // constructor 的作用，就好比 咱们之前的 function Person(){ }
  // 每当，使用 new 关键字创建 class 类实例的时候，必然会优先调用 constructor 构造器
  // constructor(){}
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 这是实例方法，必须通过 new 出来的对象调用
  say() {
    console.log("ok a ");
  }

  static info = 123;

  static sayHello() {
    console.log("这是静态方法");
  }
}

var p2 = new Per("henry", 26);
console.log(p2);
console.log(Per.info);
console.log(Per.sayHello());

使用 class 实现 JS 中的继承

myclass2.js：

class Person {
  constructor(name, age) {
    console.log(3);
    this.name = name;
    this.age = age;
  }

  say() {
    console.log("这是 Person中的 say 方法");
  }
  static info = 123;
}

// 使用 extends 实现继承，extends的前面的是子类，后面的是父类
class Chinese extends Person {
  constructor(name, age, color, language) {
    console.log(1);
    // 注意： 当使用 extends 关键字实现了继承， 子类的 constructor 构造函数中，必须显示调用 super() 方法，这个 super 表示父类中 constructor 的引用
    super(name, age);
    this.color = color;
    this.language = language;
    console.log(2);
  }
}

var c1 = new Chinese("张三", 22, "yellow", "汉语");
console.log(c1);
// 父类中任何东西，子类都能继承到
c1.say();

注意上方 constructor处的注释：当使用 extends 关键字实现了继承，子类的 constructor 构造函数中，必须显示调用 super() 方法，这个 super 表示父类中 constructor 的引用。也就是说，在子类当中，要么不写 constructor，如果写了 constructor，就一定要把 super()也加上。

为啥我们要引入 class这个功能？就是因为， class里，永远都存在着一个 constructor。我们可以利用 constructor做很多事情。

创建组件的第二种方式：使用 class 关键字

使用 class 创建的类，通过 extends 关键字，继承 React.Component 之后，这个类，就是一个组件的模板了。如果想要引用这个组件，可以把类的名称以标签的形式，导入到 JSX 中使用。

在 class 实现的组件内部，必须定义一个 render 函数。在 render 函数中，还必须 return 一个东西，如果没有什么需要被return 的，则需要 return null。

代码举例：

index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="app"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">

      // 使用 class 创建的类，通过 extends 关键字，继承 `React.Component` 之后，这个类，就是一个组件的模板了。
      // 如果想要引用这个组件，可以把类的名称以**标签的形式**，导入到 JSX 中使用。
      class Hello2 extends React.Component {
        // 在 class 实现的组件内部，必须定义一个 render 函数
        render() {
          // 在 render 函数中，还必须 return 一个东西，如果没有什么需要被return 的，则需要 return null
          return (
            <div>
              <h3>这是使用 class 类创建的组件 </h3>
            </div>
          );
        }
      }

      ReactDOM.render(
        <div>
          <Hello2> </Hello2>
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>
</html>

父组件传值给子组件

代码举例：

index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="app"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">
      // 使用 class 创建的类，通过 extends 关键字，继承 `React.Component` 之后，这个类，就是一个组件的模板了。
      // 如果想要引用这个组件，可以把类的名称以**标签的形式**，导入到 JSX 中使用。
      class Hello2 extends React.Component {
        constructor(props) {
          super(props);
          console.log(props.name);

          // 注意：`this.state` 是固定写法，表示当前组件实例的私有数据对象，就好比 vue 中，组件实例身上的 data(){ return {} } 函数
          // 如果想要使用 组件中 state 上的数据，直接通过 this.state.*** 来访问即可
          this.state = {
            msg: "这是 Hello2 组件的私有msg数据",
            info: "永不止步"
          };
        }
        // 在 class 实现的组件内部，必须定义一个 render 函数
        render() {
          // 在 render 函数中，还必须 return 一个东西，如果没有什么需要被return 的，则需要 return null
          return (
            <div>
              <h3>这是使用 class 类创建的组件 </h3>
            </div>
          );
        }
      }

      ReactDOM.render(
        <div>
          <Hello2 name="henry"> </Hello2>
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>
</html>

方式一和方式二的对比

上面的内容里，我们使用了两种方式创建组件。这两种方式，有着本质的区别，我们来对比一下。

对比：

方式一：通过 function构造函数创建组件。内部没有 state 私有数据，只有一个 props 来接收外界传递过来的数据。
方式二：通过 class 创建子组件。内部除了有 this.props 这个只读属性之外，还有一个专门用于存放自己私有数据的 this.state 属性，这个 state 是可读可写的。

基于上面的区别，我们可以为这两种创建组件的方式下定义：使用 function 创建的组件，叫做【无状态组件】；使用 class 创建的组件，叫做【有状态组件】。

本质区别：

有状态组件和无状态组件，最本质的区别，就是有无 state 属性。同时， class 创建的组件，有自己的生命周期函数，但是，function 创建的组件，没有自己的生命周期函数。

什么时候使用有状态组件，什么时候使用无状态组件：

（1）如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合用 class 创建出来的有状态组件。
（2）如果一个组件，只需要根据外界传递过来的 props，渲染固定的页面结构即可的话，此时，非常适合使用 function 创建出来的无状态组件。（使用无状态组件的小小好处：由于剔除了组件的生命周期，所以，运行速度会相对快一点点）。

React组件（一）：生命周期

组件的生命周期

在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件统称为组件的生命周期。

生命周期的阶段

组件生命周期分为三个阶段，下面分别来讲解。

1、组件创建阶段

组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次。

getDefaultProps

初始化 props 属性默认值。

getInitialState

初始化组件的私有数据。因为 state 是定义在组件的 constructor 构造器当中的，只要new 了 class类，必然会调用 constructor构造器。

componentWillMount()

组件将要被挂载。此时还没有开始渲染虚拟DOM。

在这个阶段，不能去操作DOM元素，但可以操作属性、状态、function。相当于 Vue 中的Create()函数。

render()

第一次开始渲染真正的虚拟DOM。当render执行完，内存中就有了完整的虚拟DOM了。

意思是，此时，虚拟DOM在内存中创建好了，但是还没有挂在到页面上。

在这个函数内部，不能去操作DOM元素，因为还没return之前，虚拟DOM还没有创建；当return执行完毕后，虚拟DOM就创建好了，但是还没有挂在到页面上。

componentDidMount()

当组件（虚拟DOM）挂载到页面之后，会进入这个生命周期函数。

只要进入到这个生命周期函数，则必然说明，页面上已经有可见的DOM元素了。此时，组件已经显示到了页面上，state上的数据、内存中的虚拟DOM、以及浏览器中的页面，已经完全保持一致了。

当这个方法执行完，组件就进入都了运行中的状态。所以说，componentDidMount 是创建阶段的最后一个函数。

在这个函数中，我们可以放心的去操作页面上你需要使用的 DOM 元素了。如果我们想操作DOM元素，最早只能在 componentDidMount 中进行。相当于 Vue 中的 mounted() 函数

2、组件运行阶段

有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次。

componentWillReceiveProps()

组件将要接收新属性。只有当父组件中，通过某些事件，重新修改了传递给子组件的 props 数据之后，才会触发这个钩子函数。

shouldComponentUpdate()

判断组件是否需要被更新。此时，组件尚未被更新，但是，state 和 props 肯定是最新的。

componentWillUpdate()

组件将要被更新。此时，组件还没有被更新，在进入到这个生命周期函数的时候，内存中的虚拟DOM还是旧的，页面上的 DOM 元素也是旧的。（也就是说，此时操作的是旧的 DOM元素）

render

此时，又要根据最新的 state 和 props，重新渲染一棵内存中的虚拟DOM树。当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时，虚拟DOM树已经和组件的 state 保持一致了，都是最新的；但是页面还是旧的。

componentDidUpdate

此时，组件完成更新，页面被重新渲染。此时，state、虚拟DOM 和页面已经完全保持同步。

3、组件销毁阶段

一辈子只执行一次。

componentWillUnmount: 组件将要被卸载。此时组件还可以正常使用。

生命周期对比：

组件生命周期的执行顺序

1、Mounting：

constructor()
componentWillMount()
render()
componentDidMount()

2、Updating：

componentWillReceiveProps(nextProps)：接收父组件传递过来的属性
shouldComponentUpdate(nextProps, nextState)：一旦调用 setState，就会触发这个方法。方法默认 return true；如果 return false，后续的方法就不会走了。
componentWillUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState)

3、Unmounting：

componentWillUnmount()

React组件（二）：常见属性和函数

defaultProps 和 prop-types

使用 defaultProps 设置组件的默认值

React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值。

格式举例：

 // 在 React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值
  static defaultProps = {
    initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个数值（比如0）
  };

使用prop-types进行props数据类型的校验

在组件中，可以通过 prop-types 把外界传递过来的属性，做类型校验。如果类型不匹配，控制台会弹出告警。

注意：如果要为传递过来的属性做类型校验，必须安装 React 提供的第三方包，叫做 prop-types。

格式举例：

  static propTypes = {
    initcount: ReactTypes.number // 使用 prop-types 包，来定义 initcount 为 number 类型
  };

下方代码中，在引用组件的时候，如果类型不匹配：

// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(
  <div>
    {/* 规定，每个用户在使用 组件的时候，必须传递一个 默认的 数值，作为 组件初始化的 数据 */}
    <Counter initcount="我是string类型"></Counter>
  </div>,
  document.getElementById("app")
);

代码举例

我们把 defaultProps 和 prop-types 来举个例子。

（1）index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
  <div id="app"></div>
</body>

</html>

（2）main.js:

// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";

// 导入计数器组件
import Counter from "./components/Counter.jsx";

// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(
  <div>
    {/* 规定，每个用户在使用 组件的时候，必须传递一个 默认的 数值，作为 组件初始化的 数据 */}
    <Counter initcount={0}></Counter>
  </div>,
  document.getElementById("app")
);

（3）/components/Counter.jsx：

import React from "react";
// 注意： prop-types 包中职能跟单一，只提供了 一些常见的 数据类型，用于做类型校验
import ReactTypes from "prop-types";

export default class Counter extends React.Component {
  constructor(props) {
    super(props);

    // 初始化组件，保存的是组件的私有数据
    this.state = {
      msg: "ok",
      count: props.initcount // 把 父组件传递过来的 initcount 赋值给子组件 state 中的 count值。这样的话，就把 count 值改成了可读可写的 state 属性。因此，以后就能实现“点击 按钮 ，count 值 + 1”的需求了
    };
  }

  // 在 React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值
  static defaultProps = {
    initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个 数值，为0
  };

  render() {
    return (
      <div>
        <div>
          <h3>这是 Counter 计数器组件 </h3>
          <p>当前的计数是：{this.state.count}</p>
        </div>
      </div>
    );
    // 当 return 执行完毕后， 虚拟DOM创建好了，但是，还没有挂载到真正的页面中
  }
}

事件绑定

案例：点击按钮后，计数器 +1。

原生js做事件绑定

代码举例：

（1）index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
  <div id="app"></div>
</body>

</html>

（2）main.js:

// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";

// 导入计数器组件
import Counter from "./components/Counter.jsx";

// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(
  <div>
    {/* 规定，每个用户在使用 组件的时候，必须传递一个 默认的 数值，作为 组件初始化的 数据 */}
    <Counter initcount={0}></Counter>
  </div>,
  document.getElementById("app")
);

（3）/components/Counter.jsx：

import React from "react";
// 注意： prop-types 包的职能跟单一，只提供了 一些常见的 数据类型，用于做类型校验
import ReactTypes from "prop-types";

export default class Counter extends React.Component {
  constructor(props) {
    super(props);

    // 初始化组件，保存的是组件的私有数据
    this.state = {
      msg: "ok",
      count: props.initcount // 把 父组件传递过来的 initcount 赋值给子组件 state 中的 count值。这样的话，就把 count 值改成了可读可写的 state 属性。因此，以后就能实现“点击 按钮 ，count 值 + 1”的需求了
    };
  }

  // 在 React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值
  static defaultProps = {
    initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个数值（比如0）
  };

  // 这是创建一个 静态的 propTypes 对象，在这个对象中，可以把 外界传递过来的属性，做类型校验
  static propTypes = {
    initcount: ReactTypes.number // 使用 prop-types 包，来定义 initcount 为 number 类型
  };

  render() {
    return (
      <div>
        <div>
          <h3>这是 Counter 计数器组件 </h3>
          <input type="button" value="+1" id="btn" />
          <p>当前的计数是：{this.state.count}</p>
        </div>
      </div>
    );
    // 当 return 执行完毕后， 虚拟DOM创建好了，但是，还没有挂载到真正的页面中
  }

  // 当组件挂载到页面上之后，会进入这个生命周期函数，只要进入这个生命周期函数了，必然说明，页面上，已经有可见的DOM元素了
  componentDidMount() {
    // 在这个函数中，我们可以放心的去 操作 页面上你需要使用的 DOM 元素了。
    // 也就是说，如果我们想操作DOM元素，最早，只能在 componentDidMount 中进行。
    document.getElementById("btn").onclick = () => {
      this.setState({
        count: this.state.count + 1
      });
    };
  }
}

使用 React 提供的方法，做事件绑定

代码举例：

（1）index.html和（2）main.js 的代码不变，和上一小段中的代码一致。

（3）/components/Counter.jsx：

import React from "react";
// 注意： prop-types 包的职能跟单一，只提供了 一些常见的 数据类型，用于做类型校验
import ReactTypes from "prop-types";

export default class Counter extends React.Component {
  constructor(props) {
    super(props);

    // 初始化组件，保存的是组件的私有数据
    this.state = {
      msg: "ok",
      count: props.initcount // 把 父组件传递过来的 initcount 赋值给子组件 state 中的 count值。这样的话，就把 count 值改成了可读可写的 state 属性。因此，以后就能实现“点击 按钮 ，count 值 + 1”的需求了
    };
  }

  // 在 React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值
  static defaultProps = {
    initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个数值（比如0）
  };

  // 这是创建一个 静态的 propTypes 对象，在这个对象中，可以把 外界传递过来的属性，做类型校验
  static propTypes = {
    initcount: ReactTypes.number // 使用 prop-types 包，来定义 initcount 为 number 类型
  };

  render() {
    return (
      <div>
        <div>
          <h3>这是 Counter 计数器组件 </h3>
          {/* 这里的 this 指向的是 Counter 组件的实例  */}
          <input type="button" value="+1" id="btn" onClick={this.myMethod} />
          <p>当前的计数是：{this.state.count}</p>
        </div>
      </div>
    );
    // 当 return 执行完毕后， 虚拟DOM创建好了，但是，还没有挂载到真正的页面中
  }

  // 点击事件的方法定义
  myMethod = () => {
    // 修改组件的state里面的值
    this.setState({
      count: this.state.count + 1
    });
  };
}

生命周期函数：shouldComponentUpdate()

在 shouldComponentUpdate() 函数中，必须要求返回一个布尔值。

需要注意的是：如果返回的值是 false，则不会继续执行后续的生命周期函数，而是直接退回到了运行中的状态。因为此时，后续的 render 函数并没有被调用，因此页面不会被更新，但是组件的 state 状态，却被修改了。这种情况，我们也可以这样理解：如果返回值为 false，此时只是更新了 state 里面的数值，但是并没有渲染到 DOM节点上。

利用上面这个特性，我们可以来举个例子。

举例：实现 Counter 计数器只在偶数情况下更新。

实现思路：在 shouldComponentUpdate() 函数中，如果 state 中的count 的值为奇数，就 return false；否则就 return true。

代码实现：（我们在上面的Counter.jsx代码基础之上，做添加）

  // 判断组件是否需要更新
  shouldComponentUpdate(nextProps, nextState) {

    // 经过打印测试发现：在 shouldComponentUpdate 中，通过 this.state.count 拿到的值，是上一次的旧数据，并不是当前最新的；
    // 解决办法：通过 shouldComponentUpdate 函数的第二个参数 nextState，可以拿到 最新的 state 数据。

    console.log(this.state.count + " ---- " + nextState.count);

    // 需求： 如果 state 中的 count 值是偶数，则 更新页面；如果 count 值 是奇数，则不更新页面。最终实现的的页面效果：2，4，6，8，10，12....
    // return this.state.count % 2 === 0 ? true : false
    return nextState.count % 2 === 0 ? true : false;
  }

上面这部分的代码，和 render() 方法是并列的。我们需要注意里面的注释，关注 nextState 参数的用法。

在js代码中获取html标签的属性

比如说，如果想获取 html标签的 innerHTML 属性，做法如下：

通过原生 js 获取：

	document.getElementById('myh3').innerHTML

也可以通过 React 提供的 refs 获取：

	this.refs.h3.innerHTML

代码举例：

（3）/components/Counter.jsx：

import React from "react";
// 注意： prop-types 包的职能跟单一，只提供了一些常见的数据类型，用于做类型校验
import ReactTypes from "prop-types";

export default class Counter extends React.Component {
  constructor(props) {
    super(props);

    // 初始化组件，保存的是组件的私有数据
    this.state = {
      msg: "ok",
      count: props.initcount // 把 父组件传递过来的 initcount 赋值给子组件 state 中的 count值。这样的话，就把 count 值改成了可读可写的 state 属性。因此，以后就能实现“点击 按钮 ，count 值 + 1”的需求了
    };
  }

  // 在 React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值
  static defaultProps = {
    initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个数值（比如0）
  };

  // 这是创建一个静态的propTypes 对象，在这个对象中，可以把外界传递过来的属性，做类型校验
  static propTypes = {
    initcount: ReactTypes.number // 使用 prop-types 包，来定义 initcount 为 number 类型
  };

  render() {
    return (
      <div>
        <div>
          <h3>这是 Counter 计数器组件 </h3>
          {/* 这里的 this 指向的是 Counter 组件的实例  */}
          <input type="button" value="+1" id="btn" onClick={this.myMethod} />
          <h3 id="myh3" ref="mymyh3">
            当前的计数是：{this.state.count}
          </h3>
        </div>
      </div>
    );
    // 当 return 执行完毕后， 虚拟DOM创建好了，但是，还没有挂载到真正的页面中
  }

  // 点击事件的方法定义
  myMethod = () => {
    // 修改组件的state里面的值
    this.setState({
      count: this.state.count + 1
    });
  };

  // 判断组件是否需要更新
  shouldComponentUpdate(nextProps, nextState) {
    // 需求： 如果 state 中的 count 值是偶数，则 更新页面；如果 count 值 是奇数，则不更新页面。最终实现的的页面效果：2，4，6，8，10，12....

    // 经过打印测试发现：在 shouldComponentUpdate 中，通过 this.state.count 拿到的值，是上一次的旧数据，并不是当前最新的；
    // 解决办法：通过 shouldComponentUpdate 函数的第二个参数 nextState，可以拿到 最新的 state 数据。

    console.log(this.state.count + " ---- " + nextState.count);
    // return this.state.count % 2 === 0 ? true : false
    // return nextState.count % 2 === 0 ? true : false;
    return true;
  }

  // 组件将要更新。此时尚未更新，在进入这个 生命周期函数的时候，内存中的虚拟DOM是旧的，页面上的 DOM 元素 也是旧的
  componentWillUpdate() {
    // 经过打印分析发现：此时页面上的 DOM 节点，都是旧的，应该慎重操作，因为你可能操作的是旧DOM
    // console.log(document.getElementById('myh3').innerHTML)
    console.log(this.refs.mymyh3.innerHTML);
  }

  // 组件完成了更新。此时，state 中的数据、虚拟DOM、页面上的DOM，都是最新的，此时，你可以放心大胆的去操作页面了
  componentDidUpdate() {
    console.log(this.refs.mymyh3.innerHTML);
  }
}

上方代码中，componentWillUpdate() 和 componentDidUpdate() 方法里的代码，就是我们这一段要举的例子。

需要注意的是，<h3 id="myh3" ref="mymyh3">这部分代码中，属性名只能小写，不能大写。

生命周期函数：componentWillReceiveProps()

当子组件第一次被渲染到页面上的时候，不会触发这个函数。

只有当父组件中，通过某些事件，重新修改了传递给子组件的 props 数据之后，才会触发 componentWillReceiveProps。

代码举例：

（1）index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
  <div id="app"></div>
</body>

</html>

（2）main.js:（引入组件）

// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";

import MyParent from "./components/TestReceiveProps.jsx";

// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(
  <div>
    <MyParent></MyParent>
  </div>,
  document.getElementById("app")
);

（3）TestReceiveProps.jsx：（组件的定义）

import React from "react";

// 父组件
export default class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "这是父组件中的 msg 消息"
    };
  }

  render() {
    return (
      <div>
        <h1>这是父组件</h1>
        <input
          type="button"
          value="点击修改父组件的 MSG"
          onClick={this.changeMsg}
        />
        <hr />
        {/* 在父组件 Parent 中引用子组件 Son */}
        <Son pmsg={this.state.msg} />
      </div>
    );
  }

  changeMsg = () => {
    this.setState({
      msg: "修改组件的msg为新的值"
    });
  };
}

// 子组件
class Son extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div>
        <h3>这是子组件 --- {this.props.pmsg}</h3>
      </div>
    );
  }

  // 组件将要接收外界传递过来的新的 props 属性值
  // 当子组件第一次被渲染到页面上的时候，不会触发这个 函数；
  // 只有当 父组件中，通过 某些 事件，重新修改了 传递给 子组件的 props 数据之后，才会触发 componentWillReceiveProps
  componentWillReceiveProps(nextProps) {
    // console.log('被触发了！');
    // 注意： 在 componentWillReceiveProps 被触发的时候，如果我们使用 this.props 来获取属性值，这个属性值，不是最新的，是上一次的旧属性值
    // 如果想要获取最新的属性值，需要通过 componentWillReceiveProps 的参数列表来获取
    console.log(this.props.pmsg + " ---- " + nextProps.pmsg);
  }
}

上方代码中，我们在组件 Parent 中引入了子组件 Son。重点注意 componentWillReceiveProps()函数的注释部分。

响应式系统与 React 基础 | 青训营

React介绍

虚拟DOM和diff算法

虚拟DOM

diff算法

React 介绍

React 是什么

React 的特点

React高效的原因

相关网址

生态介绍

React 模块化、组件化

模块

组件

模块化与组件化

面向对象与面向过程的区别

React 环境搭建：写第一个Hello World

react.js 和 react-dom.js

方式一：本地引入相关的js库

方式二：npm install

JSX语法介绍

JSX介绍

JSX的引入

JSX的全称

babel转换工具

JSX的基本语法

创建组件的第一种方式

创建组件

父组件传值给子组件

class 关键字的介绍

class的基本用法：使用class创建对象

使用 class 实现 JS 中的继承

创建组件的第二种方式：使用 class 关键字

父组件传值给子组件

方式一和方式二的对比

React组件（一）：生命周期

组件的生命周期

生命周期的阶段

1、组件创建阶段

2、组件运行阶段

3、组件销毁阶段

组件生命周期的执行顺序

React组件（二）：常见属性和函数

defaultProps 和 prop-types

使用 defaultProps 设置组件的默认值

使用prop-types进行props数据类型的校验

代码举例

事件绑定

原生js做事件绑定

使用 React 提供的方法，做事件绑定

生命周期函数：shouldComponentUpdate()

在js代码中获取html标签的属性

生命周期函数：componentWillReceiveProps()