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

【问题标题】：Make React useEffect only run at initial render and when property changes使 React useEffect 仅在初始渲染和属性更改时运行
【发布时间】：2020-12-08 17:18:24
【问题描述】：

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

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

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

【问题讨论】：

你的代码应该已经按照描述工作了 ^;您能否创建一个工作示例，以便我们帮助调试
它正在工作，但不是我想要的。该代码的问题是它每次安装组件时都会重新渲染，我只希望它在初始加载时运行。
你能添加一个完整的例子吗？如果组件正在卸载和重新安装 - 例如，说你正在做 - { isVisible && <YourComponent /> }... & isVisible 正在改变，我认为你不能在挂钩级别阻止这种情况，除非你在组件之外进行某种全局记忆

标签： reactjs react-hooks use-effect

【解决方案1】：

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

【讨论】：

【解决方案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]);
    ```

【讨论】：

问题是我的组件由于状态变化和 useMemo 等的使用而重新渲染了很多，所以这些 useEffects 将在我的组件中的每个重新渲染上运行，我只希望它在页面的初始加载/刷新（或变量更改时）...