useEffect在渲染阶段之后执行回调，这是两者之间的主要区别。

请参阅下一个示例：

// Log order:
// "executed at render phase"
// "executed after render phase"

const App = () => {
  useEffect(() => {
    console.log("executed after render phase");
  });

  console.log("executed at render phase");

  return <></>;
};

在这里阅读更多

在第二种情况下，您在返回 JSX 之前进行日志记录。当您使用第一个片段时，回调中的代码会在useEffect组件呈现后运行。

使用useEffect有多种其他用途，例如在状态更改时执行某些操作等。

useEffect 可以接受 2 个参数，第一个是函数，第二个是数组。

一旦组件被挂载，该函数就会被调用，但是 useEffect 的扩展特性是它有一种敏感列表，如果第二个数组中的任何参数发生变化，它可以再次运行。也让它成为 componentDidUpdate。

但是没有 useEffect 的 console.log() 会按照它的运行方式运行。你没有任何控制权。这是一个简单的例子：

useEffect(() => {
  console.log('count=', count);
}, [count]); // Only re-run the effect if count changes

它还有一个 cleanUp 方法，你可以（例如）写一个时间间隔，当组件被卸载时它可以被清除。您可以在 useEffect 中添加一个名为 'return' 的函数，就大功告成了！

let timer;

useEffect(()=>{
  timer = setInterval(() => console.log('hello!'), 1000);
  return()=>clearImmediate(timer);
})

现在，当组件被卸载时，间隔会被清除。

现在，如果我们在数组中传递一些东西让 useEffect 监听它们的变化，当 useEffect 再次使用新值运行时，组件将执行 cleanUp 方法。

这是一个例子：

let timer;

useEffect(()=>{
  timer = setInterval(() => console.log('do you need something Mr./Mrs. ' + someOne + ' ?'), 1000);
  return()=>clearImmediate(timer);
},[someOne]);

我们制作了一个计时器，它会每秒询问某人是否需要某事。现在，如果“someOne”发生变化，它会停止询问前一个，并开始每秒询问新的“someOne”。

顺便说一句，您可以将函数命名为“返回”任何您想要的名称，或者您可以只传递一个箭头函数。

函数式组件的整个函数体基本上是“渲染”函数，所以每次渲染组件时都会调用任何东西，这发生在“渲染阶段”，可以在 React 计算时暂停、中止或重新启动差异。

该useEffect挂钩的回调保证被调用一次每个渲染周期，也就是说，它是更接近的componentDidMount，componentDidUpdate和componentWillUnmount生命周期功能。请注意，这些发生在“提交阶段”，这意味着 DOM 已经被差异化并且 react 正在提交/刷新对 DOM 的 UI 更改。

尝试在 react 的严格模式下渲染您的组件，您肯定会看到不同之处。

检测意外的副作用