useEffect仅更新特定的密钥更新

Question

我有一个场景，其中我们的应用程序具有位于componentDidUpdate中的多个函数。在每个函数中，他们都会检查其特定数据是否已更新。例如：

componentDidUpdate(prevProps) {
this.handleFoo(prevProps)
this.handleMoreFoo(prevProps)
}
handleFoo(prevProps){
if(this.props.foo != prevProps.foo){
//Do Something
}
}
handleMoreFoo(prevProps){
if(this.props.moreFoo != prevProps.moreFoo){
//Do Something
}
}

我一直在看useEffect挂钩，想知道我是否可以去掉这些函数中的每个函数中的初始检查，并在useEffect中使用[]，如果它们的特定密钥更新为这样，则只调用其中一个函数：

useEffect(() => {
if(fooKey){ handleFoo() }
if(moreFoo) { handleMoreFoo() }
}, [fooKey, moreFooKey])

这可能吗？这样做明智吗？

Answer 1

以下是如何在功能组件中使用钩子来实现以前的功能。

我会定义一个自定义挂钩来模仿componentDidUpdate()，基于使React useEffect挂钩不在初始渲染时运行的答案：

function useUpdate (effect, deps) {
const firstUpdate = useRef(true);
const update = useCallback(() => {
if (firstUpdate.current) {
firstUpdate.current = false;
} else {
return effect();
}
}, [firstUpdate, effect]);
useLayoutEffect(update, deps);
}
...
useUpdate(handleFoo, [fooKey]);
useUpdate(handleMoreFoo, [moreFooKey]);

useLayoutEffect()确保在与类似的componentDidMount()和componentDidUpdate()生命周期方法相同的每个渲染阶段调用handleX()回调。如果您不关心调用它们的确切阶段，可以用useEffect()替换useLayoutEffect()。

自定义钩子的其余部分确保它在初始渲染后跳过调用handleX()回调。如果handleX()回调可以在初始渲染后调用，那么您可以直接在功能组件中调用useEffect()，而不是这个useUpdate()自定义挂钩。