美文网首页
React 生命周期

React 生命周期

作者: 二营长的意大利面 | 来源:发表于2017-07-31 10:16 被阅读0次

    实例化 > 存在期 > 销毁&清理期

    实例化

    首次使用一个组件类时,实例化期间以下方法依次调用

    • getDefaultProps (ES6 defaultProps)
      (对组件来说只调用一次.对于父组件没有指定props的新建实例,返回对象可以用于设置默认props.)
      复杂值(对象,数组)会被所有实例共享而不是拷贝或克隆.
      该方法是在createClass调用时调用的,因此不能在该方法中使用实例数据
    • getInitialState (ES6 constructor)
      对于组件的每一个实例,只会被调用一次.用于初始化state,这里可以访问this.props(因为上一个方法已经初始化this.props)
    • componentWillMount
      首次渲染之前调用,可以修改state
    • render
      创建虚拟DOM用于组件输出.对于组件来说是唯一一个必须的方法
      render需要满足以下几点
      只能通过this.state或this.props访问数据
      可以返回null,false,或者任何react组件
      只能出现一个顶级组件
      不能改变组件状态或DOM输出
    • componentDidMount
      对调用render后渲染出的DOM做后续操作通过在该方法内部使用this.getDOMNode获取渲染后的DOM从而进行后续操作

    该组件类的后续应用,以下方法依次被调用
    getInitialState
    componentWillMount
    render
    componentDidMount


    存在期

    已渲染好的组件与用户交互的时期,用户操作改变应用状态.随着应用状态的改变,以及组件逐渐受到影响.以下方法依次调用

    • componentWillReceiveProps
      该方法组件的props在被父辈组件修改时调用,在方法中可以改变props和state的值
    • shouldComponentUpdate
      用于优化组件加载速度,返回false时该组件不进行渲染且不执行render前后的两个方法
      首次渲染和执行forceUpdate方法后不调用该方法
    • componentWillUpdate
      与componentWillMount类似,但该方法不可改变props或state的值
    • render
      同上
    • componentDidUpdate
      与componentDidMount类似

    销毁&清理期

    组件移出之前componentWillUnmount将被调用,组件实例清理自身.例如 撤销定时器或者事件监听

    相关文章

      网友评论

          本文标题:React 生命周期

          本文链接:https://www.haomeiwen.com/subject/aeyllxtx.html