REACT生命周期方法

2016-11-28 14:34:56:  

下图描述了整个组件的生命周期,包含的主要几种情况:

  1. 组件被实例化的时候

  2. 组件属性改变的时候

  3. 组件状态被改变的时候

  4. 组件被销毁的时候


1. componentWillMount

void componentWillMount()

条件:第一次渲染阶段在调用 render 方法前会被调用
作用:该方法在整个组件生命周期只会被调用一次,所以可以利用该方法做一些组件内部的初始化工作

2. componentDidMount

void componentDidMount()

条件:第一次渲染成功过后,组件对应的 DOM 已经添加到页面后调用
作用:这个阶段表示组件对应的 DOM 已经存在,我们可以在这个时候做一些依赖 DOM 的操作或者其他的一些如请求数据,和第三方库整合的操作。如果嵌套了子组件,子组件会比父组件优先渲染,所以这个时候可以获取子组件对应的 DOM。

3. componentWillReceiveProps(newProps)

void componentWillReceiveProps(
  object nextProps
)

条件: 当组件获取新属性的时候,第一次渲染不会调用
用处: 这个时候可以根据新的属性来修改组件状态 
eg:

    componentWillReceiveProps: function(nextProps) {      this.setState({
        likesIncreasing: nextProps.likeCount > this.props.likeCount
      });
    }

注意: 这个时候虽说是获取新属性,但并不能确定属性一定改变了,例如一个组件被多次渲染到 DOM 中,如下面:

    var Component = React.createClass({
        componentWillReceiveProps: function(nextProps) {
            console.log('componentWillReceiveProps', nextProps.data.bar);
        },
        rener: function() {
            return <div> {this.props.data.bar} </div>
        }
    });

    var container = document.getElementById('container');
    var mydata = {bar: 'drinks'};
    ReactDOM.render(<Component data={mydata} />, container);
    ReactDOM.render(<Component data={mydata} />, container);
    ReactDOM.render(<Component data={mydata} />, container);

结果会输出两次 componentWillReceiveProps,虽然属性数据没有改变,但是仍然会调用 componentWillReceiveProps 方法。

参考 Facebook (A=>B) => (B => A)

4. shouldComponentUpdate(nextProps, nextState)

boolean shouldComponentUpdate(
  object nextProps, object nextState
)

条件: 接收到新属性或者新状态的时候在 render 前会被调用(除了调用 forceUpdate 和初始化渲染以外)
用处: 该方法让我们有机会决定是否重渲染组件,如果返回 false,那么不会重渲染组件,借此可以优化应用性能(在组件很多的情况)。

5. componentWillUpdate

void componentWillUpdate(
  object nextProps, object nextState
)

条件:当组件确定要更新,在 render 之前调用
用处:这个时候可以确定一定会更新组件,可以执行更新前的操作
注意:方法中不能使用 setState ,setState 的操作应该在 componentWillReceiveProps 方法中调用

6. componentDidUpdate

void componentDidUpdate(
  object prevProps, object prevState
)

条件:更新被应用到 DOM 之后
用处:可以执行组件更新过后的操作


Tags :
坐等站主更新~

精品书籍

更多

HTML5与CSS3权威指南代码清单
Sass和Compass设计师指南
JavaScript框架高级编程