React是否在钩子的依赖数组中应用了浅/深比较？
React是否在钩子的依赖数组中应用了浅/深比较？
提问于 2022-02-23 19:50:15
const memoizedValue = useMemo(() => {
// factory function
}, [obj]);假设obj有几个嵌套的道具。
在这个使用useMemo钩子的示例中：
如果
- 对
obj的引用更改？
，则会重新计算工厂函数给出的值。
或
- 它在
obj上应用了一个深/浅比较，然后如果一些道具更改了，则重新计算值，而不管它的引用是什么？？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-23 20:40:00
如果对obj的引用发生变化，
将重新计算工厂函数给出的值？
据我所知和理解，React使用浅引用相等检查。
考虑以下代码：
function App() {
const [c, setC] = React.useState(0);
const [obj, setObj] = React.useState({ prop: 10 });
const forceRender = () => setC((c) => c + 1);
const memoizedValue1 = React.useMemo(() => {
console.log("`obj` dependency updated, recomputing value.");
return obj.prop;
}, [obj]);
const memoizedValue2 = React.useMemo(() => {
console.log("`obj.prop` dependency updated, recomputing value.");
return obj.prop;
}, [obj.prop]);
const immutableHandler = () => {
setObj(() => {
console.log("Immutable update returns new object.");
return { prop: 42 };
});
forceRender();
};
const mutableHandler = () => {
setObj((obj) => {
console.log("Mutable update returns same object with updated property.");
obj.prop = 13; // DON'T DO THIS IN REAL CODE, IT'S A MUTATION!!
return obj;
});
forceRender();
};
return (
<div className="App">
<div>memoizedValue1: {memoizedValue1} - memoizedValue2: {memoizedValue2}</div>
<button type="button" onClick={immutableHandler}>
Immutable Update
</button>
<button type="button" onClick={mutableHandler}>
Mutable Update
</button>
<button type="button" onClick={() => setObj({ prop: 10 })}>
Reset
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />
memoizedValue1使用根obj对象值作为依赖项，而memoizedValue2使用嵌套的obj.prop对象值作为依赖项。一个按钮更新并返回一个全新的obj对象引用，而另一个按钮只更新obj.prop值引用。当整个对象被替换并且是一个新的引用时，请注意两个useMemo钩子回调都被调用，但是当只更新嵌套的prop值时，只有第二个useMemo钩子回调被调用。
结论
在比较React依赖项时，React并没有更深入地研究嵌套属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71243197
复制相关文章
相似问题
腾讯云开发者
