何时以及为何使用Effect

Question

这似乎是一个奇怪的问题，但我useEffect在 React 中并没有真正看到很多用例（我目前正在研究几千行的 React 代码库，并且从未使用过一次），而且我认为可能有一些我不完全掌握。

如果您正在编写功能组件，那么将“效果”代码放在useEffect钩子中与简单地在功能组件的主体中执行（也在每次渲染时执行）有什么区别？

一个典型的用例是在安装组件时获取数据：我看到了两种方法，一种有useEffect，一种没有：

// without useEffect
const MyComponent = () => {
    [data, setData] = useState();
    if (!data) fetchDataFromAPI().then(res => setData(res));

    return(
        {data ? <div>{data}</div> : <div>Loading...</div>}
    )
}

// without useEffect
const MyComponent = () => {
    [data, setData] = useState();
    if (!data) fetchDataFromAPI().then(res => setData(res));

    return(
        {data ? <div>{data}</div> : <div>Loading...</div>}
    )
}

useEffect在这种用例中是否有优势（性能方面或其他方面）？

Answer 1

一、清理

如果您的组件在获取完成之前被销毁怎么办？你会得到一个错误。

useEffect为您提供了一种清理处理程序返回值的简单方法。

二. 对道具变化的反应。

如果您传入userId了用于获取数据的 props，该怎么办？如果没有，useEffect您将必须userId在状态中进行复制才能判断它是否发生变化，以便您可以获取新数据。