react 的 生命周期

78 阅读1分钟

一、 生命周期

  • 在某一时刻,组件会自动调用并执行的函数;生命周期是针对组件而言的。
  • 有三个阶段:挂载阶段,更新阶段,卸载阶段

有个争论,construtor 是不是react中的生命周期呢?

  1. 首先它符合定义: 某一时刻,组件会自动调用并执行的函数
  2. 但是严格来说,他不是 react 独有的,他是es6自带的语法,因为我们现在使用的react是类组件
  3. 初始化阶段, 用来定义 state 和接受 props

二、 挂载阶段

挂载阶段只执行一次

  • render
  • componetDidMount : 挂载后执行,可以用它来做 网络请求,可以直接调用setState

三、更新阶段

eadb2158ab38e66969475b71780fe93.png

先看props和 state共有的生命周期

  1. shouldComponentUpdate :
  • 更新前判断组件是否更新,可以提高性能,
  • 组件更新前调用,可以控制组件是否更新(提升性能)
  • 深拷贝,或者转json格式反而有损性能
  • 在这个生命周期调用setState会导致无线循环调用更新,渲染,浏览器内存崩溃
  • 可以使用 pureComponent 代替
  1. render : 组件更新
  2. componentDidUpdata: 每次render后都会调用 ,使用this.setState等改变视图的操作都会照成死循环

四、卸载阶段

componentWillUnmount: 卸载前