我遇到的情况是,我们的应用程序具有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])
这可能吗?这是明智的吗?
答案 0 :(得分:2)
在这里,使用功能组件中的钩子可以完成以前的工作。
我将根据Make React useEffect hook not run on initial render的答案定义一个自定义钩子来模仿componentDidUpdate()
:
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()
确保与类似的handleX()
和componentDidMount()
生命周期方法一样,在每个渲染的相同阶段调用componentDidUpdate()
回调。如果您不关心调用它们的确切阶段,可以将useLayoutEffect()
替换为useEffect()
。
其余的自定义挂钩可确保其在初始渲染之后跳过对handleX()
回调的调用。如果可以在初始渲染后调用handleX()
回调 ,则可以直接在功能组件中调用useEffect()
而不是此useUpdate()
自定义钩子。 / p>