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()

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() 自定义勾.

useEffect 只更新特定的键更新

useEffect to only update a specific key updates

reactjs

react-redux

react-hooks

use-effect