LifeCycle

React的生命周期根据广义描述可以分为挂载,渲染,卸载几个阶段,当渲染后的组件需要更新时,我们会重新渲染组件,直至卸载.

挂载

挂载过程是React组件创建的基础过程,这个过程主要做的是组件状态的初始化。

class componentName extends Component {
    constructor(props) {
        super(props);
        this.state = {
            test: null
        };
    }
    componentWillMount() {
        // before render
    }
    componentDidMount() {
        // after render
    }
    render() {
        return (
            <div>

            </div>
        );
    }
}

componentName.propTypes = {

};

export default componentName;

以上面所示代码为例,组件的初始化过程为:

  1. 在构造函数中继承Component属性,初始化state值。
  2. 以静态属性形式设置组件属性定义,用于属性类型检查,以及属性默认值。
  3. componentWillMount生命周期方法,在render方法前执行,代表组件渲染前的过程, 只会在组件初始化时运行一次。
  4. render方法,这里暂不放入本篇中,后面会专门写一篇。
  5. componentDidMount生命周期方法,在render方法后执行,代表组件渲染后的过程,常被用于获取渲染后的组件在客户端的DOM,同样也只会在组件初始化时运行一次。

卸载

组件的卸载十分简单,React本身只提供了一个生命周期方法,componentWillUnmount,常被用于执行一些清理方法,如事件回收,清除定时器。

数据更新

更新过程指的是父组件向下传递props或者组件自身执行setState方法时发生的一系列更新动作。

class componentName extends Component {

    // ...
    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }
    render() {

    }
    // ...
}

在上面实例中, 除render方法外, 有4个生命周期方法,其中可以按触发方式分为两类, componentWillReceiveProps方法是唯一一个由于父组件向下传递props而触发的,其他都是由于自身的state更新触发, 其顺序为:

  1. shouldComponentUpdate(nextProps, nextState), 此方法适合用于优化,供开发人员做对比判断,是否需要去更新render,若返回false,后续方法不再执行。
  2. componentWillUpdate(nextProps, nextState)
  3. render
  4. componentDidUpdate(nextProps, nextState)

results matching ""

    No results matching ""