详解 React 生命周期
整个 React 生命周期有3个阶段:创建、更新、卸载,每个阶段有对应的工作和方法,我们可以看下面这个经典的图研究一下:
第一阶段
这是虚拟 DOM 创建的阶段,会依次执行 5 个方法,这 5 个方法中除了 render 方法,其余四个方法在整个生命周期中只调用 1 次,而且一定会调用 1 次:
- getDefaultProps()
这个方法在组件实例创建前,也就是构造函数执行前执行,获取父组件传来的参数,你可以在这里编辑参数并返回新的参数作为 props
- getInitalState()
组件创建的一开始会调用这个方法初始化组件的 state
- componentWillMount()
在组件 render 之前执行该方法,可用来修改 state。React 先调用父组件的这个函数,再调用子组件的这个函数
- render()
开始组件渲染函数,返回一个只有一个根节点的虚拟 DOM。该函数中不能同步的修改组件的状态(state)。
- componentDidMount()
在 render 渲染之后,通知组件已经加载完成。React 先调用子组件的这个函数,再调用父组件的这个函数。从这个函数开始,该组件就可以和其他框架交互了。比如设置计时器或者发起网络请求。
第二阶段
此时该组件已经进入了稳定运行阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面。以下方法在整个生命周期中可以执行很多次,也可以一次也不执行。
- componentWillReceiveProps()
当父容器中对应的参数改变将会调用子组件的该函数。新的 props 将会作为参数传递进来,老的 props 可以根据 this.props 来获取。我们可以在该函数中对state作一些处理。并且在该函数中更新 state 不会发生二次渲染
- shouldComponentUpdate()
该函数传递过来两个参数,新的 state 和新的 props。state 和 props 的改变都会调到该函数。该函数主要对传递过来的 nextProps 和 nextState 作判断。如果返回 true 则重新渲染(默认都是返回 true),如果返回 false 则不重新渲染。在某些特定条件下,我们可以根据传递过来的 props 和 state 来选择更新或者不更新,从而提高效率。
- componentWillUpdate()
与 componentWillMount 方法类似,在 render 渲染之前被调用。组件上会接收到新的 props 或者 state。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。
- componentDidUpdate()
与 componentDidMount 方法类似,在 render 渲染之后被调用,真实 DOM 生成之后调用该函数。传递过来的参数是之前的 props 和 state。
第三阶段
这就是消亡的阶段,主要进行内存的清理和释放的工作。这个阶段只有一个方法,该方法在整个生命周期内调用且仅调用一次。
- componentWillUnmount()
当组件要被从界面上移除的时候,就会调用 componentWillUnmount。在这里进行一些相关的销毁操作,比如撤销定时器,事件监听等等。
触发 render 的几种情况
这里我们仅考虑 shouldComponentUpdate 没有被修改,始终返回的是 true
- 首次渲染,即 Initial Render
- 调用this.setState (不是每次调用 setState 都会触发,react 会优化,比如 antd 的 input 组件)
- 父组件发生更新,通常是修改的子组件的 props
- 如果父组件触发了 render, 子组件当然也会相应触发 render
- 调用 this.forceUpdate()
一个简单的示例
import React from 'react';
import ReactDOM from 'react-dom';
import style from './font.css';
import './index.less';
class Parent extends React.Component{
constructor(props) {
super(props);
this.state = {
willRender: true,
prop: 1
};
}
render(){
return (
<div>
<button onClick={()=>{this.setState({prop: 10})}}>changePropsFromParent</button>
{
this.state.willRender &&
<Child fromParent={this.state.prop}/>
}
<button onClick={()=>{this.setState({willRender: false})}}>UnmountChild</button>
</div>
);
}
}
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
curr: 0
};
}
getDefaultProps(){
console.log('getDefaultProps');
}
getInitalState(){
console.log('getInitalState');
}
componentWillMount(){
console.log('componentWillMount');
}
componentDidMount(){
console.log('componentDidMount');
}
componentWillReceiveProps(){
console.log('componentWillReceiveProps');
}
shouldComponentUpdate(){
console.log('shouldComponentUpdate');
return true;
}
componentWillUpdate(){
console.log('componentWillUpdate');
}
componentDidUpdate(){
console.log('componentDidUpdate');
}
componentWillUnmount(){
console.log('componentWillUnmount');
}
render() {
console.log('render')
return (
<div>
<button onClick={()=>this.setState({curr:2})}>setState</button>
<button onClick={()=>{this.forceUpdate();}}>forceUpdate</button>
</div>
);
}
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。