在哪里获取数据:componentWillMout vs componentDidMout (译)

本文翻译自 :Where to Fetch Data: componentWillMount vs componentDidMount

当你需要为一个React组件获取一些数据时,你会在哪里去执行它

这个问题时刻都会被提起。

有两个常见的地方可以获取数据:

  • componentWillMount
  • componentDidMount

显然我们都很清楚,Render函数决不是一个获取数据的好地方,或者是做任何异步操作以及用某种方式改变state,否则将会产生副作用。

让我们看看这两种常见选项和他们各自的优缺点。

componentWillMout

该函数在组件的第一次Render之前被调用,因此乍一看,它似乎是一个放置数据获取逻辑的完美位置。

但是有个“知道了”:在Render发生之前,获取数据的异步调用不会返回。这意味着组件将至少使用一次空数据Render

我们无法“暂停”渲染等待数据到达。你也不能通过在componentWillMount里返回一个Promise亦或是用某种方式通过setTimeout来争取。正确的处理方法是设置组件的初识状态使其有效的渲染。

顺便说下,在ES6风格的 component class 里,constructorcomponentWillMount扮演着同样的角色,因此如果你已经有了构造函数constructor,你可以就把初始化组件state的代码放在那里就ok了,就不必在WillMount做重复的事情了.

componentDidMount

componentDidMount被调用的时候,组件已经被渲染过一次了。

实际上,componentDidMount最佳的调用获取数据方法的地方,鉴于以下两个原因:

  1. 使用 DidMout 可以明确数据不会在初始渲染之后加载。这也提醒你适当地设置初始state,这样你就不会遇到未定义的state导致的错误

  2. 如果您需要在服务器上呈现您的应用程序(SSR/同构/其他流行词),那么componentWillMount实际上将被调用两次 - 一次在服务器上,另一次在客户端 - 这可能不是您想要的。将数据加载代码放入componentDidMount将确保数据只从客户端获取。

结语

我希望这篇文章能澄清在哪里加载数据的问题。如果您仍然不确定’如何进行Ajax调用和加载数据‘的最佳方法,请阅读我的文章React中的请求

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,526评论 1 33
  • React.js 小书学习 之 【使用 JSX 描述 UI 信息】 从 JSX 到页面 过程图解:JSX 到页面过...
    zdlucky阅读 1,299评论 0 20
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 2,570评论 1 13
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,058评论 0 1
  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 6,917评论 7 41