美文网首页
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概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React生命周期

    React v16.0前的生命周期 React v16.4+ 的生命周期图 React v16.9后这些生命周期钩...

  • React v16 生命周期

    React 16 生命周期 React 16.3 新增的生命周期方法 逐渐废弃的生命周期方法: 一般将生命周期分成...

  • 学习并实现react (4)

    实现生命周期 生命周期介绍 React 生命周期图 React 子组件在父组件下的生命周期流程 实现 compon...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • react/vue常见问题整理

    一、react 1. react生命周期 react 16生命周期相对于15的变化:componentWillMo...

  • React 组件生命周期

    组件生命周期 参考阅读: component-lifecycle react组件生命周期过程说明 react 组件...

  • 《深入React技术栈》学习笔记Ⅲ

    以下的生命周期都是在 React 15 的生命周期, React 16 的生命周期 API 已经发生变化。Reac...

  • React总结

    [toc] 1.React组件生命周期 1.1 生命周期图 组件的生命周期的图如下: 具体可参考React 组件生...

网友评论

      本文标题:React 生命周期

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