关于react的生命周期深入理解

前言

    如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳，那么这只蚂蚁从绳头爬到绳尾，就会依次触动不同的卡片挂钩。在React每一个生命周期中，也有类似卡片挂钩的存在，我们把它称之为‘钩子函数’。那么在React的生命周期中，到底有哪些钩子函数？React的生命周期又是怎样的流程？最新版的react中又加了或者改了哪些钩子函数呢，今天我给大家来总结总结：

首先，如下图所示：

这张图可以分为3个大的阶段：初始化阶段，运行中和销毁阶段，在react不同的生命周期里，会依次触发不同的生命周期，也就是触发不同的钩子函数，下面具体介绍每一个钩子函数

一，初始化阶段

1.设置组件的默认属性和以及组件的初始化状态

   static defaultProps = {

                name : 'xiaoming',

                 age : 23

};

contructor() {

   super();

   this.state = {number : 0}

}

2.componentWillMount()

该组件是即将渲染到页面之前触发，此时还没有真正的dom，这个时候可以开启定时器，向服务器发送请求等操作

3.render()

组件渲染

4.componentDidMount()

组件已经被渲染到页面后触发，此时以及有了真正的dom元素，可以进行与dom相关的操作

 

二，运行中阶段

1.componentWIllReceiveProps()

该组件是接受属性时触发

2.shouleComponentUpdate()

首先这是一个性能优化点，该函数可以接受两个参数newProps,newState；

            shouldComponentUpdate(newProps,newState){

                    if(newProps.number < 5 ) return true;

                    return false;

        }
通过返回true/false来控制组件是否需要更新。

一个react项目需要更新一个小组件时，很可能需要夫组件更新自己的状态，而父组件的重新更新会造成它的所有子组件重新执行render()方法，从而形成新的虚拟dom再用diff算法对新旧虚拟dom进行结构和属性的比较，决定组件是否需要重新渲染。无疑这样的操作会造成很多的性能浪费，所以就有了shouldComponentUpdate()这个钩子函数，在其中加入条件判断，从而优化性能。

这里有必要提到的一点是，react中提供了一个pureComponent的类，当我们的组件继承它时，组件更新时就会默认比较新旧属性和状态，从而决定组件是否更新，但是值得注意的是，PureComponent（见我的上一遍文章，有详解）进行的只是浅比较，所以组件状态或者属性改变时，都需要返回一个新的对象或者数组

3.conponentWIllUpdate()

组件即将被更新时触发

4.componentDidUpdate()

组件被更新完成后触发，这个时候页面产生了新的dom元素，可以进行dom操作

 

三，销毁阶段

1.componentWillUnmount()

组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消Redux的订阅事件等等。

 

具体的流程可看下面代码；

import React from 'react'
import ReactDOM from 'react-dom';

class SubCounter extends React.Component {
    componentWillReceiveProps() {
        console.log('9、子组件将要接收到新属性');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('10、子组件是否需要更新');
        if (newProps.number < 5) return true;
        return false
    }

    componentWillUpdate() {
        console.log('11、子组件将要更新');
    }

    componentDidUpdate() {
        console.log('13、子组件更新完成');
    }

    componentWillUnmount() {
        console.log('14、子组件将卸载');
    }

    render() {
        console.log('12、子组件挂载中');
        return (
                <p>{this.props.number}</p>
        )
    }
}

class Counter extends React.Component {
    static defaultProps = {
        //1、加载默认属性
        name: 'sls',
        age:23
    };

    constructor() {
        super();
        //2、加载默认状态
        this.state = {number: 0}
    }

    componentWillMount() {
        console.log('3、父组件挂载之前');
    }

    componentDidMount() {
        console.log('5、父组件挂载完成');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('6、父组件是否需要更新');
        if (newState.number<15) return true;
        return false
    }

    componentWillUpdate() {
        console.log('7、父组件将要更新');
    }

    componentDidUpdate() {
        console.log('8、父组件更新完成');
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log('4、render(父组件挂载)');
        return (
            <div>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
                {this.state.number<10?<SubCounter number={this.state.number}/>:null}
            </div>
        )
    }
}
ReactDOM.render(<Counter/>, document.getElementById('root'));
 

 

 

转载于:https://my.oschina.net/u/4050621/blog/3029094