React组件的生命周期详细描述

React组件的⽣命周期详细描述
⽬录
⼀、什么是⽣命周期
⼆、装载过程
1、constructor
2、render
3、componentWillMount和componentDidMount
三、更新过程
1、componentWillReceiveProps（nextProps）
2、shouldComponentUpdate（nextProps， nextState）
3、componentWillUpdate和componentDidUpdate
4、触发render
四、卸载过程
五、⽣命周期流程
1、第⼀次初始化渲染显⽰: ReactDOM.render()
2、每次更新 state: this.setState()
3、移除组件: ReactDOM.unmountComponentAtNode(containerDom)
六、⽰例
总结
⼀、什么是⽣命周期
组件的⽣命周期就是React的⼯作过程，就好⽐⼈有⽣⽼病死，⾃然界有⽇⽉更替，每个组件在⽹页中也会有被创建、更新和删除，如同有⽣命的机体⼀样。

React组件的⽣命周期可以分为三个过程
装载(挂载)过程（mount）：就是组件第⼀次在DOM树中渲染的过程。

更新过程（update）：组件被重新渲染的过程。

卸载过程（unmount）：组件从DOM中被移除的过程。

⼆、装载过程
依次调⽤如下函数constructor、getInitialState、getDefaultProps、componentWillMount、render、componentDidMount。

1、constructor
就是ES6⾥的构造函数，创建⼀个组件类的实例，在这⼀过程中要进⾏两步操作：初始化state，绑定成员函数的this环境。

2、render
render是React组件中最为重要的⼀个函数。

这是react中唯⼀不可忽略的函数，在render函数中，只能有⼀个⽗元素。

render 函数是⼀个纯函数，它并不进⾏实际上的渲染动作，它只是⼀个JSX描述的结构，最终是由React来进⾏渲染过程，render函数中不应该有任何操作，对页⾯的描述完全取决于this.state和this.props的返回结果，不能在render调⽤this.setState。

有⼀个公式总结的⾮常形象 UI=render（data）
3、componentWillMount和componentDidMount
这两个函数分别在render前后执⾏，由于这⼀过程通常只能在浏览器端调⽤，所以我们在这⾥获取异步数据，⽽且在componentDidMount调⽤的时候，组件已经被装载到DOM树上了。

三、更新过程
简单来说就是props和state被修改的过程，依次调⽤componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。

1、componentWillReceiveProps（nextProps）
并不是只有在props发⽣改变的时候才会被调⽤，实际上只要是⽗组件的render函数被调⽤，render⾥⾯被渲染的⼦组件就会被更新，不管⽗组件传给⼦组件的props有没有被改变，都会触发⼦组件的componentWillReceiveProps过程，但
是，this.setState⽅法的触发过程不会调⽤这个函数，因为这个函数适合根据新的props的值来计算出是不是要更新内部状态的state。

2、shouldComponentUpdate（nextProps， nextState）
这个函数的重要性，仅次于render，render函数决定了该渲染什么，⽽shouldComponentUpdate决定了不需要渲染什么，都需要返回函数，这⼀过程可以提⾼性能，忽略掉没有必要重新渲染的过程。

3、componentWillUpdate和componentDidUpdate
和装载过程不同，这⾥的componentDidUpdate，既可以在浏览器端执⾏，也可以在服务器端执⾏
4、触发render
在react中，触发render的有4条路径。

以下假设shouldComponentUpdate都是按照默认返回true的⽅式：
(1) ⾸次渲染Initial Render。

(2) 调⽤this.setState （并不是⼀次setState会触发⼀次render，React可能会合并操作，再⼀次性进⾏render）。

(3) ⽗组件发⽣更新（⼀般就是props发⽣改变，但是就算props没有改变或者⽗⼦组件之间没有数据交换也会触发render）。

(4) 调⽤this.forceUpdate。

注意：如果在shouldComponentUpdate⾥⾯返回false可以提前退出更新路径。

四、卸载过程
实际中很少⽤到，这⾥只有⼀个componentWillUnmount，⼀般在componentDidMount⾥⾯注册的事件需要在这⾥删除。

五、⽣命周期流程
1、第⼀次初始化渲染显⽰: ReactDOM.render()
constructor(): 创建对象初始化 state
componentWillMount() : 将要插⼊回调
render() : ⽤于插⼊虚拟 DOM 回调
componentDidMount() : 已经插⼊回调
2、每次更新 state: this.setState()
componentWillUpdate() : 将要更新回调
render() : 更新(重新渲染)
componentDidUpdate() : 已经更新回调
3、移除组件: ReactDOM.unmountComponentAtNode(containerDom)
componentWillUnmount() : 组件将要被移除回调
六、⽰例
<div id='container'></div>
<script type="text/babel">
class LifeCycle extends ponent {
constructor(props) {
super(props);
alert("Initial render");
alert("constructor");
this.state = {str: "hello"};
}
componentWillMount() {
alert("componentWillMount");
}
componentDidMount() {
alert("componentDidMount");
}
componentWillReceiveProps(nextProps) {
alert("componentWillReceiveProps");
}
shouldComponentUpdate() {
alert("shouldComponentUpdate");
return true; // 记得要返回true
}
componentWillUpdate() {
alert("componentWillUpdate");
}
componentDidUpdate() {
alert("componentDidUpdate");
}
componentWillUnmount() {
alert("componentWillUnmount");
}
setTheState() {
let s = "hello";
if (this.state.str === s) {
s = "HELLO";
}
this.setState({
str: s
});
}
forceItUpdate() {
this.forceUpdate();
}
render() {
alert("render");
return(
<div>
<span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
<br />
<span>{"State:"}<h2>{this.state.str}</h2></span>
</div>
);
}
}
class Container extends ponent {
constructor(props) {
super(props);
this.state = {
num: Math.random() * 100
};
}
propsChange() {
this.setState({
num: Math.random() * 100
});
}
setLifeCycleState() {
this.refs.rLifeCycle.setTheState();
}
forceLifeCycleUpdate() {
this.refs.rLifeCycle.forceItUpdate();
}
unmountLifeCycle() {
// 这⾥卸载⽗组件也会导致卸载⼦组件
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
}
parentForceUpdate() {
this.forceUpdate();
}
render() {
return (
<div>
<a href="javascript:;" onClick={this.propsChange.bind(this)}>propsChange</a>
&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onClick={this.setLifeCycleState.bind(this)}>setState</a>
&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a> <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
</div>
);
}
}
ReactDOM.render(
<Container></Container>,
document.getElementById('container')
);
</script>
总结
本篇⽂章就到这⾥了，希望能够给你带来帮助，也希望您能够多多关注的更多内容！。