search

ForeveHG / Frontend-Daily-Interview

学习,尝试回答一些前端面试题
1 stars 0 forks source link

78. 对React生命周期的理解 #79

Open ForeveHG opened 3 years ago

ForeveHG commented 3 years ago

react的生命周期分为挂载，更新和卸载三个阶段 挂载：

  1. constructor 初始化数据
  2. componentWillMount 在初始化数据后，准备渲染dom前执行的逻辑，主要用于服务端渲染
  3. componentDidMount 在dom完成第一次渲染后执行的逻辑，dom节点已经生成

16.4版本之前和之后的更新过程不太一样

旧版更新过程中的生命周期函数：

  1. componentWillReceiveProps 接收到props属性更新时执行
  2. shouldComponentUpdate 组件进入更新流程前执行，返回false可以阻止组件更新
  3. componentWillUpdate 组件更新前执行
  4. render 组件渲染
  5. componentDidUpdate 组件更新后执行

16.4版本之后react引入了fiber异步更新,在更新过程中，一些生命函数不再安全，比如有可能会执行多次等问题

  1. static getDerivedStateFromProps(nextProps, prevState) 替换componentWillReceiveProps和componentWillUpdate，在static函数中无法操作this，只能通过props直接返回新的state
  2. getSnapshotBeforeUpdate, 替换componentWillUpdate，因为引入异步更新后，在componentWillUpdate中获取到的dom和componentDidUpdate中获取到的渲染后的dom有可能不一致，getSnapshotBeforeUpdate在真正渲染前才会去获取dom，保证渲染前后dom一致

卸载

  1. componentWillUnmount