用户道具或将道具置于状态？

Question

我正在关注React教程。在那里，讲师没有使用直接通过this.props.errors返回道具还原的错误。

相反，他在componentWillRecieveProps中将props.errors设置为状态。

componentWillRecieveProps(nextProps) {
  if (nextProps.errors) {
    this.setState({ errors: nextProps.errors})
  }
}

这样做有什么意义？为什么不直接使用this.props.errors？

Answer 1

通常这是个坏主意，您可能希望直接使用props。

如官方文档中所述：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-erasing-state-when-props-change

您要实现的目标：

  

两者的关键是，对于任何数据，您都需要选择一个   拥有它作为真理来源的单个组件，避免   将其复制到其他组件中。

如果将道具复制到状态，则将值存储在两个不同的位置。

请阅读整个文档页面以查看解决方案

Answer 2

是直接在儿童中使用道具还是将道具存储在状态中取决于您将如何使用道具

1. 如果状态将直接从道具派生，那么通常应该直接使用道具而不是将其保持在状态中。
2. 仅当您要在本地更新值并且仅在执行确认操作时更新道具提供者的情况下，才将道具存储在状态中。这种情况的一个示例是，当您有一个输入组件，其值由父级作为道具提供，但是您想要在本地进行跟踪的任何更改，然后执行onSubmit操作时，都可以将该值传递回父级。这是Input不受控制的实现的示例。