useEffect仅更新特定的密钥更新

2024-05-19 • 问答

我遇到的情况是，我们的应用程序具有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])

这可能吗？这是明智的吗？

在这里，使用功能组件中的钩子可以完成以前的工作。

我将根据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>

useEffect仅更新特定的密钥更新

xaiwei007 回答：useEffect仅更新特定的密钥更新

大家都在问