是否有一种简单的方法来确定useEffect
的依赖项数组中的哪个变量会触发函数重新触发?
如果a
是一个函数,而b
是一个对象,则仅注销每个变量可能会产生误导。在登录时,它们可能看起来相同,但实际上会有所不同并引起useEffect触发。
例如:
React.useEffect(() => {
// which variable triggered this re-fire?
console.log('---useEffect---')
}, [a, b, c, d])
我当前的方法一直在逐一删除依赖变量,直到我注意到导致过度使用useEffect调用的行为,但是必须有一种更好的方法来缩小此范围。
答案 0 :(得分:40)
我最终从各种答案中抽出了一点自己的心来做这件事。我希望能够删除useEffect
的位置以快速调试触发useEffect
的依赖项。
const usePrevious = (value, initialValue) => {
const ref = useRef(initialValue);
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const useEffectDebugger = (effectHook, dependencies, dependencyNames = []) => {
const previousDeps = usePrevious(dependencies, []);
const changedDeps = dependencies.reduce((accum, dependency, index) => {
if (dependency !== previousDeps[index]) {
const keyName = dependencyNames[index] || index;
return {
...accum,
[keyName]: {
before: previousDeps[index],
after: dependency
}
};
}
return accum;
}, {});
if (Object.keys(changedDeps).length) {
console.log('[use-effect-debugger] ', changedDeps);
}
useEffect(effectHook, dependencies);
};
下面是两个示例。对于每个示例,我假设dep2
从'foo'变为'bar'。示例1显示了输出,没有通过dependencyNames
,示例2显示了示例,带有 dependencyNames
。
示例1
之前:
useEffect(() => {
// useEffect code here...
}, [dep1, dep2])
之后:
useEffectDebugger(() => {
// useEffect code here...
}, [dep1, dep2])
控制台输出:
{
1: {
before: 'foo',
after: 'bar'
}
}
对象键“ 1”表示已更改的依赖项的索引。在这里,dep1
已更改,它是依赖项中的第二项,即索引1
示例2
之前:
useEffect(() => {
// useEffect code here...
}, [dep1, dep2])
之后:
useEffectDebugger(() => {
// useEffect code here...
}, [dep1, dep2], ['dep1', 'dep2'])
控制台输出:
{
dep2: {
before: 'foo',
after: 'bar'
}
}
答案 1 :(得分:8)
@simbathesailor/use-what-changed
就像一个吊饰!Install
和npm/yarn
和--dev
或--no-save
import { useWhatChanged } from '@simbathesailor/use-what-changed';
// (guarantee useEffect deps are in sync with useWhatChanged)
let deps = [a, b, c, d]
useWhatChanged(deps, 'a, b, c, d');
useEffect(() => {
// your effect
}, deps);
在控制台中创建此漂亮的图表:
有两个常见的罪魁祸首:
// Being used like:
export function App() {
return <MyComponent fetchOptions={{
urlThing: '/foo',
headerThing: 'FOO-BAR'
})
}
export const MyComponent = ({fetchOptions}) => {
const [someData, setSomeData] = useState()
useEffect(() => {
window.fetch(fetchOptions).then((data) => {
setSomeData(data)
})
}, [fetchOptions])
return <div>hello {someData.firstName}</div>
}
如果可以的话,在对象情况下的修复方法是在组件渲染器外部分解一个静态对象:
const fetchSomeDataOptions = {
urlThing: '/foo',
headerThing: 'FOO-BAR'
}
export function App() {
return <MyComponent fetchOptions={fetchSomeDataOptions} />
}
您还可以包装useMemo:
export function App() {
return <MyComponent fetchOptions={
useMemo(
() => {
return {
urlThing: '/foo',
headerThing: 'FOO-BAR',
variableThing: hash(someTimestamp)
}
},
[hash, someTimestamp]
)
} />
}
相同的概念在一定程度上适用于函数,但最终可能会导致过时的闭包。
答案 2 :(得分:4)
据我所知,没有一种真正简单的方法可以立即执行此操作,但是您可以放入一个自定义钩子,该钩子可以跟踪其依赖项并记录更改的依赖项:
// Same arguments as useEffect, but with an optional string for logging purposes
const useEffectDebugger = (func, inputs, prefix = "useEffect") => {
// Using a ref to hold the inputs from the previous run (or same run for initial run
const oldInputsRef = useRef(inputs);
useEffect(() => {
// Get the old inputs
const oldInputs = oldInputsRef.current;
// Compare the old inputs to the current inputs
compareInputs(oldInputs, inputs, prefix)
// Save the current inputs
oldInputsRef.current = inputs;
// Execute wrapped effect
func()
}, inputs);
};
compareInputs
位看起来可能像这样:
const compareInputs = (oldInputs, newInputs, prefix) => {
// Edge-case: different array lengths
if(oldInputs.length !== newInputs.length) {
// Not helpful to compare item by item, so just output the whole array
console.log(`${prefix} - Inputs have a different length`, oldInputs, newInputs)
console.log("Old inputs:", oldInputs)
console.log("New inputs:", newInputs)
return;
}
// Compare individual items
oldInputs.forEach((oldInput, index) => {
const newInput = newInputs[index];
if(oldInput !== newInput) {
console.log(`${prefix} - The input changed in position ${index}`);
console.log("Old value:", oldInput)
console.log("New value:", newInput)
}
})
}
您可以这样使用:
useEffectDebugger(() => {
// which variable triggered this re-fire?
console.log('---useEffect---')
}, [a, b, c, d], 'Effect Name')
您将得到如下输出:
Effect Name - The input changed in position 2
Old value: "Previous value"
New value: "New value"
答案 3 :(得分:3)
更新
经过一些实际使用,到目前为止,我喜欢以下解决方案,该解决方案借鉴了Retsam解决方案的某些方面:
const compareInputs = (inputKeys, oldInputs, newInputs) => {
inputKeys.forEach(key => {
const oldInput = oldInputs[key];
const newInput = newInputs[key];
if (oldInput !== newInput) {
console.log("change detected", key, "old:", oldInput, "new:", newInput);
}
});
};
const useDependenciesDebugger = inputs => {
const oldInputsRef = useRef(inputs);
const inputValuesArray = Object.values(inputs);
const inputKeysArray = Object.keys(inputs);
useMemo(() => {
const oldInputs = oldInputsRef.current;
compareInputs(inputKeysArray, oldInputs, inputs);
oldInputsRef.current = inputs;
}, inputValuesArray); // eslint-disable-line react-hooks/exhaustive-deps
};
然后可以通过复制依赖项数组文字并将其更改为对象文字来使用它:
useDependenciesDebugger({ state1, state2 });
这使日志记录器无需使用任何单独的参数即可知道变量的名称。
答案 4 :(得分:1)
还有另一个堆栈溢出线程,说明您可以使用useRef查看先前的值。
https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state