javascript - 何时以及为何使用Effect

Question

这似乎是一个奇怪的问题，但我在 React 中并没有真正看到很多 useEffect 的用例(我目前正在开发数千行 React 代码库，并且从未使用过它一次) )，我想可能还有一些我没有完全理解的地方。

如果您正在编写一个功能组件，那么将“效果”代码放入 useEffect Hook 中与简单地在功能组件主体中执行它(这也是在每次渲染时执行)？

一个典型的用例是在安装组件时获取数据:我看到两种方法，一种使用 useEffect，另一种不使用:

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

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

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

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

在此类用例中 useEffect 是否有优势(性能方面或其他方面)？

Answer 1

我。清理

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

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

二.对 Prop 变化的 react 。

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