react的生命周期函数理解

1.1 React组件的生命周期

1.1.1 装载过程（Mount）组件第一次在DOM树中渲染的过程

A. constructor(注意：无状态组件不需要定义自己的构造函数)

a. 初始化state

b. 绑定成员函数的this指向

c. this.foo=::this.foo;等同于this.foo=this.foo.bind(this)

B. getInitialState

a. 返回值用来初始化state（只有在React.createClass方法创造的组件才能生效）

C. getDefaultProps

a. 返回值用来初始化props

D. componentWillMount

a. 这里做的事情可以提到construcoter中去做（可以在服务器端调用，也可以在浏览器端调用）

E. render

a. 只返回JSX描述结构，最终由React来操作渲染过程

b. render函数是纯函数（根据this.state和this.props来决定返回的结构）

F. componentDidMount

a. 只能在浏览器端调用

b. 可以在函数里做ajax获取数据

1.1.2 更新过程（Update）组件被重新渲染的过程

A. componentWillReceiveProps

a. 只要父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新的过程，不管父组件传给子组件的props有没有变化都会触发该函数

b. 注意：this.setState方法触发的更新过程不会调用这个函数

B. shouldComponentUpdate

a. 两个参数(nextProps,nextState)

b. 它决定了一个组件什么时候不需要渲染

c. 必须有返回结果,返回的结果为一个布尔值

C. componentWillUpdate ---> 组件更新前

D. render

E. componentDidUpdate ----> 组件更新后

1.1.3 卸载过程（Unmount）组件从DOM移除的过程

 

A. componentWillUnmount ----> 组件删除前

a. 往往和componentDidMount有关