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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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有状态组件？

回答：

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

以上是 与getDerivedStateFromProps中的先前道具进行比较 的全部内容， 来源链接： utcz.com/qa/405141.html

回到顶部