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

小编典典

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

reactjs

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

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实现这种情况？

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

阅读 422

2020-07-22

共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;
}

2020-07-22