Question

让我们从我最喜欢的JavaScript表达式开始：

[]==[] // false

现在，让我们说一下the React doc对于跳过副作用的看法：

如果在重新渲染之间某些值未更改，您可以告诉React跳过应用效果。为此，请将数组作为第二个可选参数传递给useEffect：
useEffect(() => {/* only runs if 'count' changes */}, [count])

现在让我们考虑以下行为，这些行为使我挠了挠头：

const App = () => {

    const [fruit, setFruit] = React.useState('');
    React.useEffect(() => console.log(`Fruit changed to ${fruit}`), [fruit]);

    const [fruits, setFruits] = React.useState([]);
    React.useEffect(() => console.log(`Fruits changed to ${fruits}`), [fruits]);

    return (<div>
        <p>
            New fruit:
            <input value={fruit} onChange={evt => setFruit(evt.target.value)}/>
            <button onClick={() => setFruits([...fruits, fruit])}>Add</button>
        </p>
        <p>
            Fruits list:
        </p>
        <ul>
            {fruits.map(f => (<li key={f}>{f}</li>))}
        </ul>
    </div>)
}

ReactDOM.render(<App/>, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

添加“苹果”时，这就是控制台中记录的内容：

// on first render
Fruit changed to 
Fruits changed to 

// after each keystroke of 'apple'
Fruit changed to a
Fruit changed to ap
Fruit changed to app
Fruit changed to appl
Fruit changed to apple

// ater clicking on 'add'
Fruits changed to apple

我不了解中间部分。每次击键后，fruits从[]到[]，如果它们引用不同的对象，则在JS中是不相同的。因此，我希望记录一些Fruits changed to。所以我的问题是：

React用于确定是否跳过效果钩子的确切对象比较过程是什么？

Answer 1

每次击键后，结果从[]变为[]

似乎给人的印象是，每次击键后fruits都会重新分配给新的array。

它不是在比较两个新的数组，而是在同一特定时间点比较同一标签，该标签指向内存中的同一引用。

给出：

var arr = [];

我们可以检查arr参考是否随时间变化（如果没有发生突变）。

简单示例：

var arr = [];
var arr2 = arr;
console.log('arr === arr ', arr === arr)
console.log('arr === arr2 ', arr === arr2)

arr = [];
console.log('---- After the change ----');
console.log('arr === arr ', arr === arr)
console.log('arr === arr2 ', arr === arr2)

Answer 2

用于比较对象的函数实际上是Object.is method的polyfill。您可以在源代码中看到它：

https://github.com/facebook/react/blob/master/packages/shared/objectIs.js

这是一个在prevDeps实现中将nextDeps与useEffect进行比较的函数：

https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberHooks.js#L286

顺便说一下，Object.is在useState下被称为比较算法in the hooks API section of the docs。

useEffect React挂钩使用什么比较过程？

2 个答案: