为何React获取API数据应使用useEffect而非状态控制渲染？

你给出的这段代码确实能实现“点击按钮加载随机星战角色”的功能，但直接在组件渲染阶段用if判断触发数据请求的写法存在不少隐患，这也是React官方推荐用useEffect处理这类异步副作用的原因：

1. 违反React渲染函数的纯函数原则 #

React组件的渲染逻辑（函数体部分）应该是纯函数：相同的props和state输入，必须返回相同的JSX输出，且不能包含会产生外部影响的副作用（比如网络请求、直接修改DOM等）。

渲染阶段是React内部可以自由暂停、中断或重复执行的阶段（比如并发模式下），如果在这个阶段执行fetch这类副作用，可能会导致请求被重复触发，出现不可预测的网络请求次数，甚至引发内存泄漏。

2. 异步操作的时序与内存风险 #

你的代码里，fetch是异步操作，但setIsLoaded(true)是同步执行的——这会导致组件先以isLoaded=true的状态重渲染，此时starWarsData还是初始的空对象，直到请求完成后才会再次更新状态重渲染。如果遇到组件在请求完成前被卸载的情况，异步回调里的setStarWarsData会触发已卸载组件的状态更新，直接抛出警告。

而useEffect允许你返回一个清理函数，能在组件卸载或依赖变化时取消未完成的请求，避免这类警告和内存泄漏。

3. 无法精准控制触发时机 #

如果后续需求变化，比如需要根据某个props（比如用户选择的角色分类）来获取对应数据，直接用if判断的写法很难精准控制什么时候重新触发请求。而useEffect的依赖数组可以明确指定：只有当依赖项变化时，才重新执行副作用逻辑，能完美适配这类场景。

4. 潜在的无限渲染风险 #

假设未来你在组件里添加了其他状态，导致组件因其他原因重渲染，如果不小心在if分支里写了会修改其他状态的逻辑，就可能触发无限循环的重渲染和请求。useEffect的依赖数组能明确限定触发条件，从根源上避免这类问题。

把你的代码改成useEffect的规范写法如下：

import React from "react"

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

    React.useEffect(() => {
        if (!isLoaded) {
            const randomIndex = Math.floor(Math.random()*50)
            const controller = new AbortController()
            fetch(`https://swapi.dev/api/people/${randomIndex}`, { signal: controller.signal })
                .then(res => res.json())
                .then(data => setStarWarsData(data))
                .catch(err => {
                    if (err.name !== "AbortError") console.error(err)
                })
            setIsLoaded(true)
            
            // 组件卸载或依赖变化时取消请求
            return () => controller.abort()
        }
    }, [isLoaded])

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

内容的提问来源于stack exchange，提问作者Amine