本文翻译自 :Where to Fetch Data: componentWillMount vs componentDidMount
当你需要为一个React组件获取一些数据时,你会在哪里去执行它
这个问题时刻都会被提起。
有两个常见的地方可以获取数据:
- componentWillMount
- componentDidMount
显然我们都很清楚,Render
函数决不是一个获取数据的好地方,或者是做任何异步操作以及用某种方式改变state
,否则将会产生副作用。
让我们看看这两种常见选项和他们各自的优缺点。
componentWillMout
该函数在组件的第一次Render
之前被调用,因此乍一看,它似乎是一个放置数据获取逻辑的完美位置。
但是有个“知道了”:在Render
发生之前,获取数据的异步调用不会返回。这意味着组件将至少使用一次空数据Render
。
我们无法“暂停”渲染等待数据到达。你也不能通过在componentWillMount
里返回一个Promise
亦或是用某种方式通过setTimeout
来争取。正确的处理方法是设置组件的初识状态使其有效的渲染。
顺便说下,在ES6风格的 component class 里,constructor
和componentWillMount
扮演着同样的角色,因此如果你已经有了构造函数constructor
,你可以就把初始化组件state的代码放在那里就ok了,就不必在WillMount做重复的事情了.
componentDidMount
当componentDidMount
被调用的时候,组件已经被渲染过一次了。
实际上,componentDidMount
是最佳的调用获取数据方法的地方,鉴于以下两个原因:
使用 DidMout 可以明确数据不会在初始渲染之后加载。这也提醒你适当地设置初始
state
,这样你就不会遇到未定义的state导致的错误。如果您需要在服务器上呈现您的应用程序(SSR/同构/其他流行词),那么
componentWillMount
实际上将被调用两次 - 一次在服务器上,另一次在客户端 - 这可能不是您想要的。将数据加载代码放入componentDidMount
将确保数据只从客户端获取。
结语
我希望这篇文章能澄清在哪里加载数据的问题。如果您仍然不确定’如何进行Ajax调用和加载数据‘的最佳方法,请阅读我的文章React中的请求。