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

下面是你如何完成以前的工作，在功能组件中使用钩子。

我会根据对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() 自定义钩子。