React生命周期解析

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 Native中使用组件来封装界面模块时,整个界面就是一个大的组件,开发过程就是不断优化和拆分界面组件...
    ITxiansheng阅读 947评论 1 2
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,310评论 0 2
  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,119评论 0 0
  • 在做业务时,我们会碰到一个问题:要不要外包。 外包不外包主要的判断标准有三条: - 该业务是不是核心?缺少了它,系...
    吴少杰1988阅读 147评论 0 0