React组件的生命周期

1.装载过程

  • 当组件第一次被渲染会执行装载过程
  • constructor:用于初始化state或绑定成员函数的this环境
  • componentWillMount:在调用render函数之前被调用
  • render:只能访问this.props和this.state
  • componentDidMount:在调用render函数之后被调用

2.更新过程

  • componentWillReceiveProps:父组件的render函数被调用时被触发
  • shouldComponentUpdate:决定一个组件是否被渲染,可以提升性能
  • componentWillUpdate:提供需要更新的props和state
  • render:同上
  • componentDidUpdate:提供更新前的props和state

3.卸载过程

  • componentWillUnmount:进行清理操作,比如计时器和事件监听器

4.整体流程

  • 注意componentWillReceiveProps在父组件的render函数被调用时被触发,而不是当组件的props发生改变时触发


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React 组件的一生,是光荣的一生,是革命的一生,在它的一生中会经历这样几个阶段: 装载阶段 更新阶段 销毁阶段...
    柏丘君阅读 1,032评论 0 0
  • 一般来说,一个组件类由 extends Component 创建,并且提供一个 render 方法以及其他可选的生...
    ElineC阅读 651评论 0 2
  • 组件的生命周期 组件在react的生命周期中主要经历三个阶段:实例化、存在期和销毁时。React.js在组件生命周...
    落花的季节阅读 611评论 0 2
  • React组件生命周期4个阶段:创建阶段、实例化阶段、更新阶段、销毁阶段 【创建阶段】● getDefaultPr...
    mayunyun阅读 251评论 0 0
  • react组件生命周期 英文文档介绍 目录 三种生命状态 八种生命周期钩子 生命周期钩子的实际调用顺序 一、 re...
    ccminn阅读 764评论 0 1