访问“useEffect”中的变量而不在更新时触发效果

Question

我需要访问 useEffect 中的变量，但只有在其中一些更新时才触发该方法。

例如：

我想在data 更改时调用useEffect，但在saveTimeout 或saveMethod 更改时不调用。

以同样的方式，我想在我的组件卸载时调用 saveMethod，但我不能，因为它需要在依赖数组中，因此在每次更改 saveMethod 时调用它。

function SavingComponent({data, apiInfo}){
    [saveTimeout, setSaveTimeout] = useState(null);

    const saveMethod = useCallBack(()=>{
        clearTimeout(saveTimeout);

        // api call to save the data using apiInfo

    }, [data, saveTimeout, apiInfo])

    // Start a timer to save the data 2 seconds after it is changed (not working)
    useEffect(()=>{
        clearTimeout(saveTimeout);
        setSaveTimeout(setTimeout(saveMethod, 2000));
    }, [data, saveTimeout, saveMethod]);

    // Save immediately on dismount only (not working)
    useEffect(()=>{
      return ()=> { saveMethod(); }
    },[saveMethod])

    return (// some rendering)
}

这是我在其他情况下经常遇到的问题，并且不得不解决。通常使用自定义的usePrevious 方法。如果我感兴趣的道具没有改变，我会将道具的先前值与当前值进行比较并立即返回。

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

只有在某些依赖项更新时才调用useEffect 的正确方法是什么？

Answer 1

首先建议使用useEffect 中使用的变量和函数作为依赖项，这是最佳实践。 This is a very good article written by Dan Abramov 深入探讨了 useEffect 的工作原理以及为什么需要遵循最佳实践。

现在回到你的情况。

我认为您不希望在设置 saveTimeout 时重新渲染组件，因此请改用 useState，您可以将 useRef 用于该 saveTimeout = useRef(null)，这样您就可以从依赖项中删除 saveTimeout。

如果您不希望 saveMethod 成为依赖项，您可以将其移动到 useEffect 中，以便您也可以将其从依赖项中删除。

function SavingComponent({data, apiInfo}){
    const saveTimeout = useRef(null);

    // move saveMethod inside
    useEffect(()=>{
        const saveMethod = ()=>{
            clearTimeout(saveTimeout.current);
            // api call to save the data using apiInfo
        }
        // saveMethod will be called after 2 seconds
        saveTimeout.current = setTimeout(saveMethod, 2000);
    }, [data]);

    // move saveMethod inside
    useEffect(()=>{
        const saveMethod = ()=>{
            // api call to save the data using apiInfo
        }
        // saveMethod will be call when the component unmounted
        // But make sure you are not update any state inside saveMethod
        return saveMethod
    },[])

    return (// some rendering)
}