在JS中,两个对象不等于。
const a = {}, b = {};
console.log(a === b);
所以我不能在useEffect
(React hooks)中使用一个对象作为第二个参数,因为它总是被认为是假的(所以它会重新渲染):
function MyComponent() {
// ...
useEffect(() => {
// do something
}, [myObject]) // <- this is the object that can change.
}
这样做(上面的代码)会在每次重新渲染组件时产生运行效果,因为每次都认为对象不相等。
我可以通过将对象作为JSON字符串化值传递来“破解”这个,但它有点脏IMO:
function MyComponent() {
// ...
useEffect(() => {
// do something
}, [JSON.stringify(myObject)]) // <- yuck
有没有更好的方法来做到这一点,并避免不必要的效果调用?
附注:该对象具有嵌套属性。效果必须在此对象内的每个更改上运行。
您可以创建一个自定义挂钩,用于跟踪ref
中的先前依赖关系数组,并将对象与例如如果Lodash isEqual
不相同,则只运行提供的函数。
例
const { useState, useEffect, useRef } = React;
const { isEqual } = _;
function useDeepEffect(fn, deps) {
const isFirst = useRef(true);
const prevDeps = useRef(deps);
useEffect(() => {
const isSame = prevDeps.current.every((obj, index) =>
isEqual(obj, deps[index])
);
if (isFirst.current || !isSame) {
fn();
}
isFirst.current = false;
prevDeps.current = deps;
}, deps);
}
function App() {
const [state, setState] = useState({ foo: "foo" });
useEffect(() => {
setTimeout(() => setState({ foo: "foo" }), 1000);
setTimeout(() => setState({ foo: "bar" }), 2000);
}, []);
useDeepEffect(() => {
console.log("State changed!");
}, [state]);
return <div>{JSON.stringify(state)}</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>