React生命周期

wqxc
326 阅读2分钟

ReactClass 类

ReactClass 类 的 ReactClassInterface 对象里集 中定义了全部的生命周期函数，极其类型作用等。 这个 ReactClassInterface 是一个借口，或者是叫做规范吗，规范了我们定义组件的时候可以实现的属性，方法等。

这里我们来说说生命周期。

生命周期函数

在当前版本下，React提供的生命周期函数如下：

    getDefaultProps
    getInitialState
    componentWillMount
    componentDidMount
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    componentDidUpdate
    componentWillUnmount

关于React的生命周期我们在之前的文章中说过，现在我们再简单的来看看。

在组件生成markup的时候调用生命周期函数 componentWillMount 和 componentDidMount （在 ReactCompositeComponent 模块中）

mountComponent 方法中调用了

    if (inst.componentWillMount) {
        inst.componentWillMount();
    }
    
    if (inst.componentDidMount) {
      transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
    }

就如函数的名字一样

componentWillMount 方法是在组件挂载之前就执行。 componentDidMount 方法则是在 markup产出之后 组件被顺利挂载之后才被执行，这个方法用事务进行了处理，以保证其在正确的时机节点执行。

updateComponent 方法中调用了生命周期函数

componentWillReceiveProps 方法会在组件的props发生变动的时候执行，当然，父组件的props发生变动的时候，子组件的 该方法也会执行。

    if (inst.componentWillReceiveProps) {
        inst.componentWillReceiveProps(nextProps, nextContext);
    }

_performComponentUpdate 方法中是核心调用

      f (inst.componentWillUpdate) {
      inst.componentWillUpdate(nextProps, nextState, nextContext);
    }
    
    f (hasComponentDidUpdate) {
      transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst);
    }

这两个生命周期是在组件更新的时候来执行。

而所谓的组件要更新则需要经过一段代码来确定

     if (shouldUpdate) {
      this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);
    }

shouldUpdate 是一个布尔值。他的值来源于三个方面

    var shouldUpdate = 
    this._pendingForceUpdate || 
    !inst.shouldComponentUpdate || inst.shouldComponentUpdate(nextProps, nextState, nextContext);

根据生命函数 shouldComponentUpdate 以及强制更新属性 _pendingForceUpdate来确定是否需要更新。

到了这里 ，以下六个生命函数就都被触及到了。

    componentWillMount
    componentDidMount
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    componentDidUpdate

组件的卸载生命函数就不用再说了，在组件被卸载掉的时候执行。

    componentWillUnmount

也就是在 unmountComponent 方法被调用的时候

    if (inst.componentWillUnmount) {
        inst.componentWillUnmount();
    }

最后我们再来说说下边这两个生命周期方法

    getDefaultProps
    getInitialState

这两个作为方法的话在es5的时候使用，也就是使用 React.createClass来构建组件的时候作为函数传入，但是在es6中已经被舍弃了。

ES6中

我们先看看在ES6中

    App.defaultProps = {}

我们一般使用上边的形式来为组件定义默认的props,当我们使用上述的方式来为组件定义默认的props的时候，这个 defaultProps 的值会在React.createElement 的时候会将组件的 defaultProps 合并到props中。

    this.state = {}

而后我们使用上边这样的形式来为组件设定默认的state。

ES5中

在ES5中我们构建组件的方式是

    var ShowTitle = React.createClass({
      getDefaultProps:function(){
        return{
          title : "百度科技"
        }
      },
      getInitialState:function(){
        return{
          title : "百度科技"
        }
      },
      render : function(){
        return <h1>{this.props.title}</h1>
      }
    )}

在ReactClass模块中定义了该种方式如何来使用这两个方法 如下：

    var initialState = this.getInitialState ? this.getInitialState() : null;
    
    if (Constructor.getDefaultProps) {
        Constructor.defaultProps = Constructor.getDefaultProps();
    }
avatar
文章
阅读
粉丝