官方答：在React18中请求数据的正确姿势（其他框架也适用）

公众号@魔术师卡颂

发布于 2022-11-22 14:30:15

2.5K0

发布于 2022-11-22 14:30:15

文章被收录于专栏：魔术师卡颂

大家好，我卡颂。

一些同学喜欢在useEffect中请求初始数据，类似这样：

useEffect(() => {
  fetch(xxx).then(data => setState(data.json()))
}, [])

但React18并不推荐这种方式。

这么写有什么问题？如果不推荐这种方式，那么推荐的方式是什么呢？

本文来看看Dan在reddit[1]是如何回答上述问题的。

这是一个普遍的问题

除了React外，大部分以「组件」形式组织的前端框架，都有如下类似的API：

effect
didMount/didUpdate

如果有「初始化时请求数据」的需求，这类框架都会选择在上述回调函数内执行请求操作，并在数据返回后更新状态。

所以，这并不是React独有的问题。相反，他很普遍。

之所以在React中这么突出，是因为React官方在引导开发者不要用这种形式书写代码（通过「严格模式下useEffect执行两次」放大这个问题）。

而React之所以这么做，是为了项目的「性能」以及「UX」（User Experience，用户体验）。

下面我们来细聊这么做的影响。注意，这些影响同样适用于其他框架。

为什么不推荐这么写？

需要解决竞态问题

在useEffect中请求数据要面临的第一个问题是「需要解决竞态问题」。

假设你有个组件User，接收userID作为props，用userID请求数据后展示用户信息。

下面是你的写法：

function User({userID}) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const res = await fetch(`https://xxx/${userID}/`);
    setData(res.json());
  }, [userID]);

  if (data) {
    return <div>{data.name}</div>;
  } 
  return null;
}

这里有个开发阶段很难复现的bug —— 如果userID变化足够快，会发起多个不同的用户请求。

而最终展示哪个用户的数据，取决于哪个请求先返回。这就是「请求的竞态问题」。