了解 useEffect 第二个参数答案

【问题标题】：Understand useEffect second param了解 useEffect 第二个参数
【发布时间】：2021-04-02 04:17:29
【问题描述】：

我做了一些对我的情况有好处的事情，但我不明白它是如何工作的，我很乐意解释 cmets。

我尝试执行每 5 秒更改一次背景图像的功能。

1.我的第一次尝试是：（例如，我有包含 3 个图像的 mainImages 数组。）

    const [index, setIndex] = useState(0);
    useEffect(() => {
    const interval = setInterval(() => {
              setIndex(index+1)
             (index > mainImages.length-1)? console.log("Bigger",index):console.log("smaller","i="i)
    }, 5000);
    return () => clearInterval(interval);
    }, []);

在这种情况下。每 5 秒我得到 -"smaller",i=0 - 对于每个间隔，即使在 3 个或更多间隔之后 奇怪的部分：图像的变化如预期。甚至索引仍然是 0。

2.我的第二次尝试：我在索引和图像中也得到了我期望的结果。

我把 [index] 设置为使用 effect sec 参数之间的唯一变化。
```
     useEffect(() => {
      thesame....
 }, [index]);
```
在这种情况下。每 5 秒我就会得到正确的控制台（

每 5 秒我得到 -"smaller",i=0
```
   "smaller",i=1 
   "smaller",i=2
   "Bigger",i=3.......
```

所以我的问题：幕后发生了什么，它的影响如何？它是如何工作的？

【问题讨论】：

当你给 setInterval 回调函数时，它使用索引状态的快照，它不会每 5 秒改变一次。所以你每次都会得到相同的索引。将index添加到依赖数组时，每次更新索引时都会调用钩子，因此在interval的回调函数中得到正确的索引。

标签： reactjs react-native react-hooks use-effect

【解决方案1】：

依赖数组用于决定何时扔掉旧的效果并开始新的效果。因此，对于一个空数组，效果仅在挂载时运行一次，然后在卸载时进行拆解。这意味着您设置了一次间隔。闭包中的index const 的值为0，并且该值永远不会改变。

当您将其更改为在依赖数组中包含 index 时，现在每次组件呈现时，如果索引更改，它将拆除旧间隔并开始一个新间隔。对于其中的每一个，闭包中index 的值与效果运行时的值相同。所以第一个为 0，第二个为 1，依此类推。

请注意，使用第二种方法时，每个间隔只会发生一次。所以真的，它们更像是超时而不是间隔。如果你愿意，你可以把它改成setTimeout，结果基本一样。

但对于您的具体情况，还有一种更好的方法：使用 setIndex 的回调版本。与其依赖闭包知道 index 的值，不如让 react 告诉你 index 的最新值是什么：

const [index, setIndex] = useState(0);
useEffect(() => {
    const interval = setInterval(() => {
        setIndex(prevIndex => {
            (prevIndex > mainImages.length-1) 
              ? console.log("Bigger", prevIndex)
              : console.log("smaller","i="i);
            return prevIndex + 1;
        });
    }, []);
    return () => clearInterval(interval);
}, []);

// If you don't need the logging, then setting the state can be simply:
//    setIndex(prevIndex => prevIndex + 1)

【讨论】：