×
广告

React生命周期解析

96
莫可可小姐d远方
2017.07.25 15:53* 字数 678

React生命周期主要会经历这4个阶段:创建阶段、实例化阶段、更新阶段、销毁阶段

  • 调用 React.createClass,即创建组件类的时候,会触发getDefaultProps 方法,该方法返回一个对象,然后与父组件指定的props对象合并,最后赋值给 this.props 作为该组件的默认属性,该方法只调用一次

2、实例化阶段

  • getInitialState:初始化state 的值,返回值会赋给this.state
  • componentWillMount:操作state,不会触发再次渲染,建议用constructor代替
  • render:根据 state 的值,生成页面需要的虚拟 DOM 结构
  • componentDidMount:可以设置state,会触发再次渲染,组件内部可以通过 ReactDOM.findDOMNode(this)来获取当前组件的节点操作DOM

3、更新阶段~~用户操作或者父组件有更新的时候

  • componentWillReceiveProps(nextProps):当组件接收到新的props时会触发该函数,通常可以调用this.setState方法来比较this.propsnextProps的执行状态,完成对state的修改
  • shouldComponentUpdate(nextProps, nextState):该方法用来拦截新的propsstate,然后判断是否更新组件
  • componentWillUpdate(nextProps, nextState):更新之前调用
  • render:根据diff算法,生成需要更新的虚拟DOM数据
  • componentDidUpdate(prevProps, prevState):更新之后调用,可以进行DOM 操作
    tips:render中最好只是数据和模板的组合,不应该修改state
    如果shouldComponentUpdate返回false,componentWillUpdate,render,componentDidUpdate都不会被调用

4、销毁阶段

  • 会触发componentWillUnmount,通常是移除DOM,取消事件绑定,销毁定时器等工作

props

  • 1、props 是一个对象,是组件用来接收外面传来的参数的
  • 2、组件内部是不允许修改自己的 props 属性,只能通过父组件来修改

state

  • 它是用来存储组件自身需要的数据
  • 它是可以改变的,它的每次改变都会触发组件的render方法来更新DOM结构

递归调用~Will方法先调用,Did方法后调用

  • 父组件的componentWillMount / componentWillUpdate方法一定在子组件的componentWillMount / componentWillUpdate方法之前调用
  • 父组件的componentDidMount / componentDidUpdate方法一定在子组件的 componentDidMount / componentDidUpdate方法之后调用

demo地址

参考文章推荐:
深入理解react(源码分析) #1
React源码分析3 — React生命周期详解
React 源码剖析系列 - 生命周期的管理艺术
React生命周期的实现
React.Component
React - 组件的生命周期详解(及各阶段调用的方法)

React+Redux
Web note ad 1