reactjs：获取外部数据

Question

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

当使用componentWillMount时，记录为上面的代码对于服务器渲染（将不使用外部数据）和即将到来的异步渲染模式（其中请求可能多次启动）都是有问题的次）。

我不明白：

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

Answer 1

如果您进一步阅读本书，他们将进一步解释componentWillMount为何存在问题。

  

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

但是这些可能会变得毫无意义，因为react本质上不赞成 生命周期函数来响应17，因此目前已重命名为UNSAFE_componentWillMount，不建议使用，而是使用{{ 1}}来获取异步数据。

  

componentDidMount为什么要解决此问题？

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

react component lifecycle docs

Answer 2

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

您可能会争辩说，在首次安装组件之前进行AJAX调用以提取外部数据会更好吗？ 不会更好，因为您不知道执行AJAX通话将花费多少时间。您的AJAX请求获取数据所需的时间可能比安装组件所花费的时间更长，因此，由于组件已经渲染且没有重新渲染，因此数据不会显示在DOM上。您的AJAX请求可能由于任何原因而花费的时间更长-您的用户在移动设备上且互联网速度较慢，服务器出现问题导致返回响应的速度变慢，等等...

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