在 useEffect 中，不提供依赖数组和提供空数组有什么区别？

Question

我认为useEffectHook 在每次渲染后运行，如果提供了一个空的依赖数组：

useEffect(() => {
  performSideEffect();
}, []);

但是这和下面的有什么区别呢？

useEffect(() => {
  performSideEffect();
});

注意[]结尾的缺失。linter 插件不会发出警告。

Answer 1

不完全一样。

• 给它一个空数组就像componentDidMount在，它只运行一次。

• 不给它第二个参数同时充当componentDidMountand componentDidUpdate，因为它首先在 mount 上运行，然后在每次重新渲染时运行。

• 给它一个数组作为第二个参数，其中包含任何值，例如, [variable1]只会useEffect在挂载时执行一次钩子内的代码，以及每当该特定变量 (variable1) 更改时。

您可以在https://reactjs.org/docs/hooks-effect.html上阅读有关第二个参数的更多信息以及有关钩子如何在官方文档上实际工作的更多信息

Answer 2

只是补充@bamtheboozle's回答。

如果您从您的 useEffect

useEffect(() => {
  performSideEffect();
  return cleanUpFunction;
}, []);

它将在每次useEffect代码运行之前运行，以清理之前的 useEffect 运行。（除了第一次 useEffect 运行）

Answer 3

聚会迟到了，但我想把这个例子放在这里，这是我在阅读上述评论后为了自己的理解而做的：

import './App.css';
import { useEffect, useState } from 'react';

function App() {

  const [name, setName] = useState('John');
   useEffect(()=>{
    console.log("1- No dependency array at all");
  });
  useEffect(()=>{
    console.log("2- Empty dependency array");
  }, []);
  useEffect(()=>{
    console.log("3- Dependency array with state");
  }, [name]);

  const clickHandler = () => {
    setName('Jane');
  }
  return (
    <div className="App">
      <button onClick={clickHandler}>Click to update state</button>
      <p>{`Name: ${name}`}</p>
    </div>
  );
}

export default App;

输出

页面加载时

 1- No dependency array at all
 2- Empty dependency array
 3- Dependency array with state
 1- No dependency array at all
 2- Empty dependency array
 3- Dependency array with state

单击按钮-状态更新

 1- No dependency array at all
 3- Dependency array with state