阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      React ⽣命周期函数

      问题

      React ⽣命周期函数

      答案

      在 V16 版本中引⼊了 Fiber 机制。这个机制⼀定程度上的影响了部分⽣命 周期的调⽤,并且也引⼊了新的 2 个 API 来解决问题

      在之前的版本中,如果你拥有⼀个很复杂的复合组件,然后改动了最上层组件 的 state ,那么调⽤栈可能会很⻓

      调⽤栈过⻓,再加上中间进⾏了复杂的操作,就可能导致⻓时间阻塞主线程,带来不好的 ⽤户体验。 Fiber 就是为了解决该问题⽽⽣

      Fiber 本质上是⼀个虚拟的堆栈帧,新的调度器会按照优先级⾃由调度这些帧,从⽽将 之前的同步渲染改成了异步渲染,在不影响体验的情况下去分段计算更新

      对于如何区别优先级, React 有⾃⼰的⼀套逻辑。对于动画这种实时性很⾼的东⻄,也 就是 16 ms 必须渲染⼀次保证不卡顿的情况下, React 会每 16 ms (以内) 暂停⼀ 下更新,返回来继续渲染动画

      对于异步渲染,现在渲染有两个阶段: reconciliation 和 commit 。前者过程是可以 打断的,后者不能暂停,会⼀直更新界⾯直到完成。

      初始化阶段

      • getDefaultProps :获取实例的默认属性
      • getInitialState :获取每个实例的初始化状态
      • componentWillMount :组件即将被装载、渲染到⻚⾯上
      • render :组件在这⾥⽣成虚拟的 DOM 节点
      • omponentDidMount :组件真正在被装载之后

      运⾏中状态

      • componentWillReceiveProps :组件将要接收到属性的时候调⽤
      • shouldComponentUpdate :组件接受到新属性或者新状态的时候(可以返回false,接收数
      • 据后不更新,阻⽌ render 调⽤,后⾯的函数不会被继续执⾏了)
      • componentWillUpdate :组件即将更新不能修改属性和状态
      • render :组件重新描绘
      • componentDidUpdate :组件已经更新

      销毁阶段

      • componentWillUnmount :组件即将销毁

      因为 Reconciliation 阶段是可以被打断的,所以 Reconciliation 阶段 会执⾏的⽣命周期函数就可能会出现调⽤多次的情况,从⽽引起 Bug 。由此 对于 Reconciliation 阶段调⽤的⼏个函数,除了 shouldComponentUpdate 以外,其他都应该避免去使⽤,并且 V16 中也 引⼊了新的 API 来解决这个问题。

      getDerivedStateFromProps ⽤于替换 componentWillReceiveProps , 该函数会在初始化和 update 时被调⽤

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录