react 生命周期

Posted 春眠不觉晓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 生命周期相关的知识,希望对你有一定的参考价值。

生命周期:一个组件在不同的时期会调用不同时期的函数接口(也就是对应的生命周期函数)

react组件的生命周期总共提供了10个API。

装载:

依次执行以下函数:

constructor -- 组件被加载前最先调用,只调用一次

  1、getDefaultProps --作用于组件类,只调用一次,设置默认的 props,对于引用值,会在组件中共享

  2、getIntialState -- 在ES6语法中废弃了这种写法,作用于组件实例,在组件被实例化的时候被调用一次,用于初始化每个实例的 State,此时可以访问 this.props,在ES6中可以在constructor使用this.state={}

  3、函数体第一句必须是:super(props)

componentWillMount -- 在完成首次渲染之前调用,只调用一次,此时可以修改组件的 state

render -- 创建虚拟DOM,需要注意:

  1、只能通过 this.prop 和 this.state 访问数据

  2、可以返回 null 、false 和任何 React 组件

  3、只能出现一个顶级组件(不能返回数组)

  4、不能改变组件的状态

  5、不能修改DOM输出

componentDidMount -- 真实的DOM被渲染出来之后调用,只调用一次,需要注意:

  1、可以通过 this.DOMNode() 访问到真实的DOM元素

  2、可是使用其他类库来操作这个DOM

  3、在服务端中,该方法不会被调用

更新:

组件数据发生变化,也就是 prop 和 state 被改变,会依次执行如下函数:

componentWillReceiveProps -- 组件接收到新的 props 时调用,此时可以更改组件 props 和 state

  1、props 是父组件传递给子组件的,父组件发生 render的时候子组件就会调用

 componentWillReceiveProps: function(nextProps) {
        if (nextProps.bool) {
            this.setState({
                bool: true
            });
        }
    }

shouldComponentUpdate -- 组件是否应当渲染新的 props 和 state

  1、返回 false 表示跳过后续的生命周期

  2、首次渲染调用了 forceupdate 方法后,该方法不会被调用

  3、用来进行性能优化,因为有些变化并不需要重新render的,例如前后两次的 props 和 state 相同,但是不建议使用

shouldComponentUpdate: function(nextProps,nextState){}

componentWillUpdate -- 接收到新的 props 和 state 之后,进行渲染之前调用,此时不允许更新 props 和 state

 

componentDidUpdate -- 完成新的 props 和 state 更新渲染之后调用,此时可以访问到真实的 DOM 

卸载:

销毁组件:componentWillUnmount -- 组件被移除之前调用

  用于清除一些不必要的东西,例如组件中事件的解绑等...

 

以上是关于react 生命周期的主要内容,如果未能解决你的问题,请参考以下文章

关于片段生命周期

调用 replace() 时片段的生命周期是啥?

Android片段生命周期:onResume调用了两次

在不存在的片段上调用片段生命周期和 onCreate 的问题

导航上的片段生命周期重叠

Android 片段生命周期