前端-React: Hook的秘密

前端-React: Hook的秘密

大家知道React Hook中存在依赖数组,它的存在是为了控制组件是否变化而需要重新渲染。那么它是怎么判断这个依赖的值是否有变化的呢?

我发现没有文档介绍这个判断count变化到底是怎么做的。所以我们只能自己在源码里找了。下面的链接里可以找到areHookInputsEqual方法,

https://github.com/facebook/react/blob/v18.1.0/packages/react-reconciler/src/ReactFiberHooks.new.js#L323

这里就是判断依赖是否相等源码,原来它没有使用==或===来判断,而是使用了Object.is函数, 我们都知道==和===的区别,那为什么用Object.is呢?以下来自MDN,里面说三种相等比较模式,严格相等(===),非严格相等(==),同值相等(Object.is)https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness#a_model_for_understanding_equality_comparisons

例如:

  • +0, -0 and 0 :===返回相等, Object.is 返回不等。可能Object.is就是为了数学上的正确性
  • NaN === NaN : Object.is 相等, === 不等, 这应该就是相同值的正确性
  • 所以这就是React选择了Object.is的原因

    另外,React不会做深比较,它只是比较它们是否是相同的对象。===和Object.is在对象比较上都是一样的结果。

    郑重声明:本文内容及图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权请联系管理员(admin#wlmqw.com)删除。
    上一篇 2022年6月23日 06:15
    下一篇 2022年6月23日 06:15

    相关推荐

    联系我们

    联系邮箱:admin#wlmqw.com
    工作时间:周一至周五,10:30-18:30,节假日休息