reactjs：获取外部数据答案

【问题标题】：reactjs : Fetching external datareactjs：获取外部数据
【发布时间】：2019-09-11 13:51:18
【问题描述】：

我正在学习如何使用 Reactjs，并阅读了以下帖子： https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data

当使用componentWillMount 时，写到上面的代码对于服务器渲染（不会使用外部数据）和即将到来的异步渲染模式（可能会发起多次请求）都有问题.

我不明白：

请求如何被多次发起，因为 componentWillMount 仅使用一次。
为什么 componentDidMount 解决了这个问题。对于服务器渲染，在第一次渲染调用中也不会使用外部数据。

【问题讨论】：

标签： reactjs

【解决方案1】：

根据 React 文档，在 componentWillMount 中更改组件的状态将不会触发重新渲染。这意味着如果您进行 AJAX 调用并将响应设置为组件状态，它将不会重新呈现，这意味着您将看不到 DOM 中的数据。（请记住，组件最初创建时的初始状态很可能没有来自您的外部数据/AJAX 调用响应的数据）

您可能会争辩说，在组件第一次挂载之前执行我的 AJAX 调用来提取外部数据不是更好吗？这不会更好，因为您不知道执行 AJAX 调用需要多少时间。您的 AJAX 请求获取数据所需的时间可能比组件安装所需的时间长，因此您的数据不会显示在您的 DOM 上，因为组件已经渲染并且没有重新渲染发生。由于任何原因，您的 AJAX 请求可能需要更长时间 - 您的用户在移动设备上并且互联网速度较慢，您的服务器的某些问题导致返回响应速度变慢，等等...

最好的办法是在 componentDidMount 中调用 AJAX 并让组件处理空数据（可能显示加载微调器），直到 AJAX 请求返回数据，将其设置为组件状态并触发重新渲染！ :)

【讨论】：

非常感谢。我现在明白了我的问题的第二部分。在我正在编写的示例中，我需要渲染这些数据，但如果连接速度很慢，我必须显示一个加载微调器。以及如何多次发起请求：componentWillMount 可以被多次调用？ (Rq : 我用componentDidMount，只是为了理解生命周期)

【解决方案2】：

如果您进一步阅读，他们会进一步解释为什么 componentWillMount 存在问题。

上面的代码对于服务器渲染（其中外部数据不会被使用）和即将到来的异步渲染模式（可能会多次发起请求）。

但是这些可能会变得毫无意义，因为 react 本质上是在弃用 that 生命周期函数来 react 17，因此目前已重命名为 UNSAFE_componentWillMount 并且不推荐使用，而是使用 componentDidMount 来让你的异步数据获取。

为什么componentDidMount 会解决这个问题？

因为服务器正在预渲染组件/JSX，但您不希望组件在实际安装并在浏览器中运行之前获取其数据。

react component lifecycle docs

【讨论】：

感谢您的回答，但这是我不明白的。我也在我的问题中复制了这句话。我也知道 componentWillMount 已被弃用，并将在 ReactJS 17 中删除。我阅读了一些关于 getDerivedStateFromProps 的博客。
这是服务器端渲染的问题，因为获取的数据永远不会被使用，所以这是一个无用的调用。关于异步渲染的另一部分意味着他们说在组件实际安装和准备好之前可以调用函数多次，但它只能安装一次，所以将你的异步获取移到那里会工作的。