考虑一个具有道具“名称”和状态“经过”的组件。
new Component(name) => "Hi {name}. It's been {elapse} seconds"
{elapse}道具{name}更改时应将其重置为0 。
{elapse}
{name}
如果道具在10秒内从“爱丽丝”变为“鲍勃”,则消息应从
嗨,爱丽丝。已经十秒钟了
至
嗨,鲍勃。到了0秒
getDerivedStateFromProps不能使用,因为{elapse}它不是的纯函数{name},我不能返回0,因为它可能在重新渲染时被调用。
getDerivedStateFromProps
componentDidUpdate最终将更新{elapse}为0,但在此之前,将向用户显示无效状态 “嗨,鲍勃。已经为0秒” 。
componentDidUpdate
可以getDerivedStateFromProps还是可以componentDidUpdate实现这种情况?
在许多情况下,状态不是道具的纯粹功能。是getDerivedStateFromProps仅适用于无状态的功能部件?反应是否鼓励使用无状态组件?
如何getDerivedStateFromProps替换componentWillReceiveProps有状态组件?
componentWillReceiveProps
如果你看看周围,你会看到你不是有这个问题的第一个-它被彻底GitHub上讨论1 2 3并在hackernews一个线程在这里。推荐的解决方案是在状态下镜像需要检查的道具:
state = { name: "", lastTime: Date.now() } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.name !== prevState.name) { return { name: nextProps.name, lastTime: Date.now() }; } return null; }