我最终从各种答案中汲取了一点点来制作我自己的钩子。我希望能够只删除一些东西来代替 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'
}
}