与getDerivedStateFromProps中的先前道具进行比较

Question

考虑一个具有道具“名称”和状态“经过”的组件。

new Component(name) => "Hi {name}. It's been {elapse} seconds"

{elapse}道具{name}更改时应将其重置为0 。

如果道具在10秒内从“爱丽丝”变为“鲍勃”，则消息应从

嗨，爱丽丝。已经十秒钟了

至

嗨，鲍勃。到了0秒

• getDerivedStateFromProps不能使用，因为{elapse}它不是的纯函数{name}，我不能返回0，因为它可能在重新渲染时被调用。

• componentDidUpdate最终将更新{elapse}为0，但在此之前，会向用户显示无效状态“嗨，鲍勃。已经为0秒”。

可以getDerivedStateFromProps或componentDidUpdate实现这个场景？

1. 在许多情况下，状态不是道具的纯粹功能。是getDerivedStateFromProps仅适用于无状态的功能部件？反应是否鼓励使用无状态组件？

2. 如何getDerivedStateFromProps替换componentWillReceiveProps有状态组件？

Answer 1

如果你看看周围，你会看到你不是有这个问题的第一个-它被彻底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;
}