我们是否需要确保getDerivedStateFromProps不是递归的?

时间:2018-06-05 18:16:11

标签: reactjs

我正在尝试了解新的React生命周期方法,并且无法弄清楚一些细节。在getDerivedStateFromProps的React文档中,它说:

  

在调用render之前调用getDerivedStateFromProps   方法,包括初始安装和后续更新。这应该   返回一个对象以更新状态,或返回null以不更新任何内容。

     

请注意,无论如何,此方法都会在每个渲染上触发   引起即可。这与UNSAFE_componentWillReceiveProps形成鲜明对比   仅在父项导致重新渲染时触发,而不是由于   本地setState。

(强调我的)

如果我理解正确,如果我只是从props派生状态并返回它(顾名思义我们应该这样做),我将触发无限循环,因为this.state将更新,这将触发重新渲染,将调用getDerivedStateFromProps,这将返回新的状态更新,...

我们是否需要确保如果更改与旧状态不同,或者我遗漏了什么,我们只返回状态更新?

1 个答案:

答案 0 :(得分:2)

  

我将触发一个无限循环,因为this.state将更新,这将触发重新渲染,并调用getDerivedStateFromProps

那是不正确的。 getDerivedStateFromProps在渲染之前而不是渲染之后被调用。引用react doc(https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops):

  

getDerivedStateFromProps在调用渲染方法之前被调用

从技术上讲,从getDerivedStateFromProps返回的任何内容都将包含在即将到来的渲染中的状态更新中。渲染不会触发另一个getDerivedStateFromProps,因此不会出现无限循环。我认为,如果您在componentDidUpdate内致电setState,可能会遇到您担心的情况。

但是,即使不会触发无限循环,也并不意味着从prop派生状态是好的。实际上,您应该尝试避免这种情况。查看此博客:https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

通常,如果可以的话,应该在render方法中动态计算所需的任何内容。这样可以确保数据始终正确且是最新的。