使 React useEffect 仅在初始渲染和属性更改时运行

Question

我有一个 useEffect，我只想在初始渲染和变量更改时运行。 这意味着我不希望它在每次组件重新呈现时都运行。 这是我卡住的地方，这是我当前的代码简化：

useEffect(() => {
       // Some logic only to be performed when variable changes OR at initial render
    }, [variable]);

关于如何实现这一目标的任何想法？

Answer 1

您需要在每次渲染时有条件地运行它，因此摆脱依赖数组并在 useEffect 中添加条件。 否则，您可以制作 2 个 useEffects，一个带有空依赖数组，另一个带有 state 变量。

Answer 2

如果您希望您的 useEffect 在初始渲染时运行，请执行以下操作：

useEffect(()=>{
// do whatever you want to do here
},[]);

如果您希望它在一些变量更改上运行，那么：

useEffect(() => {
       // Some logic only to be performed when variable changes OR at initial render
    }, [variable]);
    ```