React中useEffect取数是否通用推荐？状态触发取数是否规范？

示例代码 #

// Sample Code

const [anyState, setAnyState] = useState<number>(0);

const fetchData = async () => {
  try {
    const rsp = await fetch(...);
    setData(rsp)
  }
}

useEffect(() => {
  fetchData();
},[anyState]);


return (
  <>
    <button onClick={() => setAnyState(prev => prev + 1)}>Update</button> {/* 是否推荐该方式？ */}
    <button onClick={() => fetchData()}>Update</button> {/* 我认为这是常规方式。 */}
  </>
)

问题解答 #

1. 在React中使用useEffect钩子获取数据是否属于通用做法，是否推荐？ #

用useEffect做数据获取是React里非常普遍且推荐的做法，尤其是在常规的客户端组件中。它专门用来处理组件挂载后、或者依赖项变化时的副作用，数据获取刚好契合这个场景。不过React 18推出后，结合Suspense的新数据获取模式（比如服务端组件、客户端组件里的Suspense用法）在一些场景下更优，但对于大多数普通的客户端数据请求，useEffect依然是靠谱且被广泛使用的方案。

2. 通过更新状态触发useEffect调用fetchData获取数据的方式是否规范、是否值得推荐？ #

这种方式不规范，也不建议用。主要问题有几个：

• 语义混乱：anyState和数据请求本身没有直接关系，只是个用来触发请求的"开关"，后续维护代码的人很难理解这个状态的作用。
• 多余状态增加复杂度：平白多维护一个无关状态，不仅让组件逻辑变乱，还可能导致不必要的重渲染。
• 误触发风险：如果这个状态被其他逻辑不小心修改，会导致无意义的重复请求，浪费资源。

更合理的方式就是你提到的第二种——直接在按钮点击事件里调用fetchData，逻辑清晰直接，只有用户主动触发时才发起请求。如果需要组件挂载时也请求一次数据，可以单独写一个依赖为空数组的useEffect：

useEffect(() => {
  fetchData();
}, []); // 仅组件挂载时执行一次

内容的提问来源于stack exchange，提问作者Humanoid Mk.12