【ReactJS】通过一个例子学习React组件的生命周期

朴灿烈づ我的快乐病毒、 2022-06-02 03:51 116阅读 0赞

# 源代码 #

<!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>React-props</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>    
        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    </head>
    <body>
        <div id="demo"></div>
        <script type="text/babel"> var AddCount=React.createClass({ getInitialState:function(){ console.log('1...getInitialSate'); return {count:1}; }, componentWillMount:function(){ console.log('2...componentWillMount'); }, componentDidMount:function(){ console.log('3...componentDidMount'); }, componentWillUpdate:function(){ console.log('4...componentWillUpdate'); }, componentDidUpdate:function(){ console.log('4...componentDidUpdate'); }, handleClick:function(event){ this.setState({count:this.state.count+1}) }, render:function(){ return( <p> {this.state.count}<br/> <button onClick={this.handleClick}>Add</button> </p> ) } }) ReactDOM.render( <AddCount/>, document.getElementById("demo") ); </script>
    </body>
    </html>

# 效果图 #

![这里写图片描述][SouthEast]

--------------------

# 组件的生命周期 #

为了理解 React 的工作过程，我们就必须要了解 React 组件的生命周期，如同人有生老病死，自然界有日月更替，每个组件在网页中也会被创建、更新和删除，如同有生命的机体一样。

React 严格定义了组件的生命周期，生命周期可能会经历如下三个过程：

*  装载过程（Mount），也就是把组件第一次在DOM树中渲染的过程；
 *  更新过程（Update），当组件被重新渲染的过程；
 *  卸载过程（Unmount），组件从DOM中删除的过程；  
    三种不同的过程，React 库会依次调用组件的一些成员函数，这些函数称为生命周期函数。所以，要定制一个React组件，实际上就是定制这些生命周期函数。

## 装载过程 ##

当组件第一次被渲染的时候，依次调用的函数是如下这些：

*  constructor
 *  getInitialState
 *  getDefaultProps
 *  componentWillMount
 *  render
 *  componentDidMount

constructor、getInitialState、getDefaultProps和render我在 [深入理解prop、state与render函数][prop_state_render] 有记载过，若不懂可以跳转查看。

这里主要说下 componentWillMount 和 componentDidMount。

在装载过程中，componentWillMount 会在调用 render 函数之前被调用，componentDidMount 会在调用 render 函数之后被调用，这两个函数就像是 render 函数的前哨和后卫，一前一后，把 render 函数夹住，正好分别做 render 前后必要的工作。

不过，我们通常不用定义 componentWillMount 函数，顾名思义，componentWillMount 发生在“将要装载”的时候，这个时候没有任何渲染出来的结果，即使调用 this.setState 修改状态也不会引发重新绘制，一切都迟了。换句话说，**可以在这个 componentWillMount 中做的事情，都可以提前到 constructor 中间去做**，可以认为这个函数存在的主要目的就是为了和 componentDidMount 对称。

而 componentWillMount 的这个兄弟 componentDidMount 作用就大了。

**需要注意的是，render 函数被调用完之后，componentDidMount 函数并不是会被立刻调用**，componentDidMount 被调用的时候，render 函数返回的东西已经引发了渲染，组件已经被“装载”到了DOM树上。  
　　  
　　之所以会有上面的现象，是因为 render 函数本身并不往DOM树上渲染或者装载内容，它只是返回一个JSX表示的对象，然后由 React 库来根据返回对象决定如何渲染。所以，只有React库调用n个组件的render函数之后，才有可能完成装载，这时候才会依次调用各个组件的 componentDidMount 函数作为装载过程的收尾。

## 更新过程 ##

更新过程会依次调用下面的生命周期函数，其中render函数和装载过程一样，没有差别。

*  componentWillReceiveProps
 *  shouldComponentUpdate
 *  componentWillUpdate
 *  render
 *  componentDidUpdate

除了render函数，shouldComponentUpdate可能是React组件生命周期中最重要的一个函数了。

说 render 函数重要，是因为 render 函数决定了该渲染什么，而说 shouldComponentUpdate 函数重要，是因为它决定了一个组件什么时候不需要渲染。

render 和 shouldComponentUpdate 函数，也是React生命周期函数中唯二两个要求有返回结果的函数。render 函数的返回结果将用于构造DOM对象，而 shouldComponentUpdate 函数返回一个布尔值，告诉 React 库这个组件在这次更新过程中是否要继续。

在更新过程中，React 库首先调用 shouldComponentUpdate 函数，如果这个函数返回 true，那就会继续更新过程，接下来调用 render 函数；反之，如果得到一个 false，那就立刻停止更新过程，也就不会引发后续的渲染了。

说 shouldComponentUpdate 重要，就是因为只要使用恰当，他就能够大大提高 React 组件的性能，虽然 React 的渲染性能已经很不错了，但是，不管渲染有多快，如果发现没必要的重新渲染，那就干脆不用渲染好了，速度会更快。

我们知道 render 函数应该是一个纯函数，这个纯函数的逻辑输入就是组件的 props 和 state。所以，shouldComponentUpdate 的参数就是接下来的 props 和 state 值。如果我们要定义 shouldComponentUpdate，那就根据这两个参数，外加 this.props 和 this.state 来判断出是返回 true 还是返回 false。

## 卸载过程 ##

React组件的卸载过程只涉及一个函数 **componentWillUnmount**，当 React 组件要从DOM树上删除掉之前，对应的 componentWillUnmount 函数会被调用，所以这个函数适合做一些清理性的工作。

和装载过程与更新过程不一样，这个函数没有配对的 Did 函数，就一个函数，因为卸载完就完了，没有“卸载完再做的事情”。

每当组件使用完成，这个组件就必须从DOM中销毁，此时该方法就会被自动调用。当我们在组件中使用了setInterval，那我们就需要在这个方法中调用clearTimeout。

[SouthEast]: /images/20220602/083989a07d104be6915d06c8a32a5c48.png
[prop_state_render]: http://blog.csdn.net/u013451157/article/details/78728213