Javascript 中的空方括号？

Question

我在https://upmostly.com/tutorials/setinterval-in-react-components-using-hooks中遇到了这段代码：

useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will run every second!');
  }, 1000);
  return () => clearInterval(interval);
}, []);

我很好奇最后的方括号[]是做什么的？ 根据这个站点https://reactjs.org/docs/hooks-effect.html ，我们可以在没有它们的情况下使用 useEffect() 。

Answer 1

如果我们希望 useEffect 中的代码只运行一次，我们放置一个空的[] 。 如果没有空[] ，useEffect 中的代码将在每次渲染时运行

Answer 2

请参阅文档：

我们不需要在每次更新时都创建一个新订阅，只要源属性发生了变化。

...

将第二个参数传递给 useEffect，它是效果所依赖的值数组。

...

如果传递一个空数组（[]），则效果中的道具和 state 将始终具有其初始值。 虽然传递 [] 作为第二个参数更接近于熟悉的 componentDidMount 和 componentWillUnmount mental model，但通常有更好的解决方案来避免过于频繁地重新运行效果。

Answer 3

此代码用于模拟基于 class 的组件中 componentDidMount() 的属性。 也就是说，它只会在组件被挂载时被调用。

如果我们不指定一个空数组 ( [] ) 作为 useEffect 钩子的第二个参数，那么该钩子将表现出 componentDidUpdate 的行为。 这意味着每次某个 prop 的值发生变化时，都会触发 useEffect 挂钩。

第二个数组参数允许您指定哪个道具在其值更改时触发 userEffect() 回调