WHAT - React useEffect 依赖的 Object.is

一、背景

在 https://react.dev/reference/react/useEffect 中我们了解到：

React will compare each dependency with its previous value using the Object.is comparison.

接下来我们学习一下 Object.is 。Object.is 是 JavaScript 中的一个静态方法，用于比较两个值是否相同。它与 === 运算符的行为略有不同，尤其在处理特殊值（比如 NaN 和 -0）时表现更为准确和可预测。

二、Object.is 的语法

Object.is(value1, value2)

• value1：第一个要比较的值。
• value2：第二个要比较的值。

三、Object.is 的行为

1. 基本用法：

   Object.is(1, 1);     // true
   Object.is(1, '1');   // false
   Object.is('foo', 'foo'); // true
   

   • Object.is 类似于严格相等运算符 ===，但是处理一些特殊情况时有所不同。

2. 处理特殊值：

   Object.is(NaN, NaN);   // true
   Object.is(0, -0);      // false
   Object.is(-0, -0);     // true
   

   • NaN 是 JavaScript 中特殊的非数值（Not-a-Number）。
   • -0 和 0 被视为不同的值，尽管它们在一般的数值比较中是相等的。

3. 与严格相等运算符 === 的区别：

   NaN === NaN;   // false
   0 === -0;      // true
   -0 === -0;     // true
   

   • === 运算符在比较 NaN 和 -0 时的结果与 Object.is 不同。

4. 在 React 中的应用：

   React 使用 Object.is 来进行依赖项比较。在函数组件的 useEffect 和 useMemo 钩子中，React 会比较依赖项的前一个值和当前值，以决定是否重新计算或执行相关的效果。

   useEffect(() => {// Effect code
   }, [dependency1, dependency2]);
   

   • 在上述例子中，React 将使用 Object.is 比较 dependency1 和 dependency2 的前一个值和当前值。如果值不同（使用 Object.is 的定义），则重新运行 useEffect 中的代码。

四、总结

Object.is 是 JavaScript 中用于比较两个值是否严格相等的方法，它在处理特殊值（如 NaN 和 -0）时与 === 运算符有所不同。在 React 中，React Hooks 如 useEffect 和 useMemo 使用 Object.is 来确定依赖项是否发生变化，从而决定是否重新执行相关的效果或计算。