ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
&emsp;&emsp;组件的生命周期(Life Cycle)包含三个阶段:挂载(Mounting)、更新(Updating)和卸载(Unmounting),在每个阶段都会有相应的回调方法(也叫钩子)可供选择,从而能更好的控制组件的行为。 ## 一、挂载 &emsp;&emsp;在这个阶段,组件会完成它的首次渲染,先执行初始化,再被挂载到真实的DOM中,其中依次调用的方法有constructor()、componentWillMount()、render()和componentDidMount()。除了render(),其他三个方法都只会运行一次。 **1)constructor()** &emsp;&emsp;在生命周期中,类的构造函数constructor()会率先被执行,用于初始化组件的状态、接收外部传递进来的数据、绑定成员方法的this指向等工作。 **2)componentWillMount()** &emsp;&emsp;componentWillMount()方法会运行在render()之前,它是渲染之前的回调函数。不过,由于在这个方法中执行的任务都能提前到constructor()中,因此实际项目中很少会用到它。 **3)render()** &emsp;&emsp;render()是在定义组件时必须声明的方法,它是一个无副作用的纯函数,可根据组件的props和state得到一个React元素、null或false等返回值,并且在render()方法中不能调用改变组件状态的this.setState()方法。注意,将元素渲染到页面DOM中的工作都由React负责,而不是render()方法。 **4)componentDidMount()** &emsp;&emsp;componentDidMount()方法会运行在render()之后,它是渲染之后的回调函数。此时组件已被挂载到页面中,可以执行DOM相关的操作,例如异步读取服务器中的数据并填充到组件中、调用jQuery代码等。 &emsp;&emsp;下面的组件没有实际用途,仅仅是为了演示四个回调函数,其中componentWillMount()和componentDidMount()都成功调用了this.setState()方法。 ~~~js class Btn extends React.Component { constructor(props) { super(props); this.state = { name: props.name }; } componentWillMount() { this.setState({age: 28}); } render() { return <button>{this.state.name}</button>; } componentDidMount() { $.post("server.php", {id:1}, json => { this.setState({age: json.data.age}); }, "json"); } } ~~~ ## 二、更新 &emsp;&emsp;引起组件更新(即重新渲染)的方式有三种,第一种是由父组件向下传递props(即调用父组件的render()方法)引起的更新,依次会调用五个方法:componentWillReceiveProps()、shouldComponentUpdate()、componentWillUpdate()、render()和componentDidUpdate()。第二种是通过改变自身state(即调用this.setState()方法)引起的更新,会忽略componentWillReceiveProps()方法,只执行四个回调函数。第三种是通过组件的forceUpdate()方法强制更新,只有后三个回调函数会被执行。在下面的组件中,定义了更新阶段的五个回调函数,并且点击按钮就会触发强制更新。 ~~~js class Btn extends React.Component { constructor(props) { super(props); this.state = { name: "strick" }; } dot() { this.setState({name: "freedom"}); this.forceUpdate(); //强制更新 } componentWillReceiveProps(nextProps) { } shouldComponentUpdate(nextProps, nextState) { return true; } componentWillUpdate(nextProps, nextState) { } render() { return <button onClick={this.dot.bind(this)}>{this.state.name}</button>; } componentDidUpdate(prevProps, prevState) { } } ~~~ **1)componentWillReceiveProps()** &emsp;&emsp;componentWillReceiveProps()方法常用于执行props更新后的逻辑,只有第一种更新方式才会调用它,该方法能接收一个名为nextProps的参数,表示父组件传递进来的新的props。当需要通过this.setState()方法将nextProps中的数据同步到内部状态时,要先比较nextProps和this.props中的值是否相同,再决定是否执行同步。由于在componentWillReceiveProps()中能调用this.setState()方法,因此为了避免进入一个死循环,在调用this.setState()方法更新组件时就不会触发它。 **2)shouldComponentUpdate()** &emsp;&emsp;shouldComponentUpdate()用于决定是否继续组件的更新,它能接收2个参数:nextProps和nextState,分别表示新的props和state,通过比较nextProps、nextState和组件当前的this.props、this.state能得出一个布尔类型的返回结果。当返回结果为false时,组件会停止更新,后续的componentWillUpdate()、render()和componentDidUpdate()也不会被执行。将这个方法使用恰当的话,能减少冗余的渲染,优化组件的性能。 **3)componentWillUpdate()和componentDidUpdate()** &emsp;&emsp;componentWillUpdate()和componentDidUpdate()分别运行在render()之前和之后,它们都能接收2个参数,前者提供更新后的props和state,后者提供更新前的props和state。在componentWillUpdate()中,不能调用this.setState()方法,以免发生不必要的死循环。 ## 三、卸载 &emsp;&emsp;当组件在从DOM中被卸载之前,会触发一个无参数的componentWillUnmount()方法。在该方法内适合做些清理的工作,例如清除定时器、移除多余的DOM元素等。下面演示了处理卸载的过程,限于篇幅省略了组件的构造函数和render()方法,只给出了关键代码。 ~~~js class Btn extends React.Component { componentWillUnmount() { clearInterval(timeout); } } var container = document.getElementById("container"); ReactDOM.render(<Btn>提交</Btn>, container); ReactDOM.unmountComponentAtNode(container); //移除DOM中的组件 ~~~ ## 四、流程图 &emsp;&emsp;接下来用一张总的流程图(如图5所示)来说明生命周期各个方法之间的关系,灰底的方法表示在其内部能调用this.setState()方法。 :-: ![](https://box.kancloud.cn/315e381a4a876418bad25aaa517bcf32_1467x848.png) 图5 组件生命周期流程图 ## 五、过时和新增的回调方法 **1)过时** &emsp;&emsp;从React v16.3开始,有3个生命周期方法被标记为过时:componentWillMount()、componentWillReceiveProps()和componentWillUpdate(),目前它们仍然有效,但不建议在新代码中使用,官方为它们新增了一个以“UNSAFE\_”作为前缀的别名。 **2)新增** &emsp;&emsp;React v16新增了两个生命周期方法,如下所列。 &emsp;&emsp;(1)static getDerivedStateFromProps(nextProps, prevState) &emsp;&emsp;静态方法getDerivedStateFromProps()用来替代componentWillReceiveProps()。它在render()方法之前触发,包含两个参数:nextProps和prevState,分别表示新的props和旧的state。如果返回一个对象,那么更新state;如果返回null,那么就不更新state。 &emsp;&emsp;(2)getSnapshotBeforeUpdate(prevProps, prevState) &emsp;&emsp;getSnapshotBeforeUpdate()方法用来替代componentWillUpdate()。它在最近一次渲染输出(即更新DOM)之前触发,包含两个参数:prevProps和prevState,分别表示旧的props和旧的state,返回值会成为componentDidUpdate()的第三个参数。 ***** > 原文出处: [博客园-React躬行记](https://www.cnblogs.com/strick/category/1455720.html) [知乎专栏-React躬行记](https://zhuanlan.zhihu.com/pwreact) 已建立一个微信前端交流群,如要进群,请先加微信号freedom20180706或扫描下面的二维码,请求中需注明“看云加群”,在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily),欢迎浏览。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推荐一款前端监控脚本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不仅能监控前端的错误、通信、打印等行为,还能计算各类性能参数,包括 FMP、LCP、FP 等。