我正在尝试了解新的React生命周期方法,并且无法弄清楚一些细节。在getDerivedStateFromProps的React文档中,它说:
在调用render之前调用getDerivedStateFromProps 方法,包括初始安装和后续更新。这应该 返回一个对象以更新状态,或返回null以不更新任何内容。
请注意,无论如何,此方法都会在每个渲染上触发 引起即可。这与UNSAFE_componentWillReceiveProps形成鲜明对比 仅在父项导致重新渲染时触发,而不是由于 本地setState。
(强调我的)
如果我理解正确,如果我只是从props派生状态并返回它(顾名思义我们应该这样做),我将触发无限循环,因为this.state
将更新,这将触发重新渲染,将调用getDerivedStateFromProps
,这将返回新的状态更新,...
我们是否需要确保如果更改与旧状态不同,或者我遗漏了什么,我们只返回状态更新?
答案 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方法中动态计算所需的任何内容。这样可以确保数据始终正确且是最新的。