反应获取副作用[关闭]答案

【问题标题】：React fetch side effect [closed]反应获取副作用[关闭]
【发布时间】：2023-01-20 01:26:44
【问题描述】：

我的帖子与其说是问题，不如说是问题。在 React 中，为了从 API 中获取数据，我们使用钩子 useEffect。但为什么不与各州合作来管理重新渲染呢？（见下面的例子）

import React from "react"

export default function App() {
    const [starWarsData, setStarWarsData] = React.useState({})
    const [isLoaded, setIsLoaded] = React.useState(false)

    if (!isLoaded) {
        const randomIndex = Math.floor(Math.random()*50)
        fetch(`https://swapi.dev/api/people/${randomIndex}`)
        .then(res => res.json())
        .then(data => setStarWarsData(data))
        setIsLoaded(true)
    }


    return (
        <div>
            <pre>{JSON.stringify(starWarsData, null, 2)}</pre>
            <button onClick={() => setIsLoaded(false)}>Load random charachter</button>
        </div>
    )
}

如您所见，我使用一个简单的 if 语句来管理重新渲染。你能告诉我为什么在获取数据时我应该使用 useEffect 而不是上面介绍的方式吗？

提前致谢

【问题讨论】：

它就停在您描述的位置或更早的位置。如果您没有任何要清理的东西，则不需要该部分。 React 还在严格模式下双重渲染，所以你会得到两个实例，在这种情况下，isLoaded 为 false。最终你会问为什么你不应该使用 React，因为它是为使用而设计的，而且你的决定不太可能得到支持
@BrianThompson 不是我决定以其他方式使用反应而不是它的设计方式。这是一个天才的问题。我只是想深入了解 useEffect 的使用。但看起来我的问题在某种程度上令人反感。无论如何，感谢您的评论。

标签： reactjs react-hooks fetch rerender

【解决方案1】：

好吧，我实际上认为这是一个很好的问题:)

从技术上讲，您在这里所做的是可行的，因为您要确保提取只会发生一次并且不会重新触发无限渲染。

但是在渲染阶段执行副作用有一些缺陷：

您在渲染阶段使用 useState，这意味着您有无限次重新触发渲染阶段的危险。
假设您只想在挂载阶段完成后获取一次数据（使用空依赖数组或类组件中的 componentDidMount 事件的 useEffect）- 您可以摆脱 isLoaded 状态并仅使用一种状态来存储数据，因为代码只会触发一次，您不必担心在 isLoaded 状态下重新渲染。
在每个单独的渲染中，您将检查 isLoaded 是否为 false，这是多余的，因为我们确切地知道何时要重新获取数据。（仅在安装后，并单击“加载随机字符”按钮后）
通过使用useEffect- 您确保数据获取不会中断 UI，并且不会通过使用依赖项数组不情愿地重新触发渲染。通过使用这个钩子，代码会更清晰，而且您可以确切地知道它何时会被调用。

（旁注 - 请记住 setState 是异步的，这可能会导致意外渲染，如果您依赖于该状态的先前值，也会导致一些问题）

【讨论】：