React 生命周期

🌙
手机阅读
本文目录结构

16.3 版本以前和以后生命周期是不同的;

Before React 16.3,下面这个图参考下就可以

After React 16.3,一个比较直观的图

官网上的图,供参考


生命周期不同阶段

  • constructor
  • getDerivedStateFromProps
  • componentDidMount
  • componentWillUnmount
  • getSnapshotBeforeUpdate
  • componentDidUpdate
  • shouldComponentUpdate

constructor

  • 用于初始化内部状态,很少使用
  • 唯一可以直接修改 state 的地方,以后都是 setState 修改了

getDerivedStateFromProps

  • 当 state 需要从 props 初始化时时候
  • 进来不要使用:维护两者状态一致性会增加复杂度
  • 每次 render 都会调用的
  • 典型场景:表单控件获取默认值(初始值是 props 指定,而后就是用户输入的值了)

基本上除了表单获取默认值的场景下,别的场景用不到

componentDidMount

  • UI 渲染完成后调用,这个方法非常常用
  • 只执行一次
  • 典型场景:获取外部资源(发 AJAX 事情)

componentWillUnmount

  • 组件移除时被调用
  • 典型场景:资源释放

getSnapshotBeforeUpdate

  • 在页面 render 之前调用,state 已更新
  • 典型场景:获取 render 之前的 DOM 状态(思考为什么要获取?)

比如交易所,最新交易记录,可以滚动的,如果滚动到某一个位置,由于上方一直插入,滚动条会一直动,不能定位某条数据;

getSnapshotBeforeUpdate 可以获取之前高度,和现在高度的差值,然后差值加scrollTop,这样就可以定位某条数据了;

componentDidUpdate

  • 每次 UI 更新时被调用
  • 典型场景:页面需要根据 Props 变化重新获取数据(比如文章的内容是根据 URL 的 ID 来获取的,当用户改变 ID 时候,根据新 ID 渲染对应内容)

shouldComponentUpdate

  • 决定 Virtual DOM 是否需要重绘(是否重绘,决定是否进行 render)
  • 典型场景:性能优化
  • 一般不需要自己实现,由 PureComponent 自动实现,可以判断当前 props/state 和之前的值是否有变化,如果没变化,会自动阻止的;

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>