码云笔记前端博客
Home > 每日·壹题 > 第10题:React生命周期有哪些,16版本生命周期发生了哪些变化?

第10题:React生命周期有哪些,16版本生命周期发生了哪些变化?

2019-09-24 分类:每日·壹题 作者:码云 阅读(89)

本文共计1197个字,预计阅读时长需要3分钟。

15生命周期

React生命周期有哪些,16版本生命周期发生了哪些变化?

初始化阶段

  • constructor 构造函数
  • getDefaultProps props默认值
  • getInitialState state默认值

挂载阶段

  • componentWillMount 组件初始化渲染前调用
  • render 组件渲染
  • componentDidMount组件挂载到 DOM后调用

更新阶段

  • componentWillReceiveProps 组件将要接收新 props前调用
  • shouldComponentUpdate 组件是否需要更新
  • componentWillUpdate 组件更新前调用
  • render 组件渲染
  • componentDidUpdate 组件更新后调用

卸载阶段

  • componentWillUnmount 组件卸载前调用

16生命周期

React生命周期有哪些,16版本生命周期发生了哪些变化?

初始化阶段

  • constructor 构造函数
  • getDefaultProps props默认值
  • getInitialState state默认值

挂载阶段

  • staticgetDerivedStateFromProps(props,state)
  • render
  • componentDidMount

getDerivedStateFromProps:组件每次被 rerender的时候,包括在组件构建之后(虚拟 dom之后,实际 dom挂载之前),每次获取新的 props或 state之后;每次接收新的props之后都会返回一个对象作为新的 state,返回null则说明不需要更新 state;配合 componentDidUpdate,可以覆盖 componentWillReceiveProps的所有用法

更新阶段

  • staticgetDerivedStateFromProps(props,state)
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate(prevProps,prevState)
  • componentDidUpdate

getSnapshotBeforeUpdate:触发时间: update发生的时候,在 render之后,在组件 dom渲染之前;返回一个值,作为 componentDidUpdate的第三个参数;配合 componentDidUpdate, 可以覆盖 componentWillUpdate的所有用法

卸载阶段

  • componentWillUnmount

错误处理

  • componentDidCatch

React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps,componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。

React16并没有删除这三个钩子函数,但是不能和新增的钩子函数混用, React17将会删除这三个钩子函数,新增了对错误的处理( componentDidCatch)

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(8) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
8

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 第10题:React生命周期有哪些,16版本生命周期发生了哪些变化?

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648014 次
  • 最近更新: 2019年10月21日