reactjs - 来自 props 的“value”和状态中的 'thisValue'，反模式？

Question

我发现自己最近写了很多代码，如下所示:

const SomeComponent: React.FunctionComponent<SomeComponentProps> = props => {
  const { value } = props;
  const [thisValue, setThisValue] = React.useState(value);

  const handleChange = React.useCallback(e => {
    setThisValue(e.target.value);
  }, []);
 ....

Full example on CodePen.

我从 props 传递一个初始化值，然后在组件内修改该值。

它满足了我的要求，但我开始怀疑它。

这是反模式吗？

Answer 1

这是一篇很好的(有点旧的)文章，讨论了使用 props 初始化状态:

https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e

React 文档将此称为反模式:

“在 getInitialState 中使用 props 生成状态通常会导致“事实来源”的重复，即真实数据所在的位置。这是因为 getInitialState 仅在首次创建组件时才会被调用。”

从文档来看，有一个异常(exception):

“仅当您故意想要忽略 Prop 更新时才使用此模式。在这种情况下，将 Prop 重命名为initialColor或defaultColor是有意义的。然后您可以通过更改来强制组件“重置”其内部状态必要时使用它的 key 。”

话虽这么说，我也发现自己有时会这样做。

我发现它有用的一个例子是允许用户编辑复杂状态的组件。您可以使用 props 初始化状态，组件会在内部处理对此状态的更改。如果你想在 props 改变时重置状态，你有两个选择:

第一个是监听更改并调用 setState，如下所示:

componentDidUpdate(prevProps, prevState) {
  if (prevProps.inputValue !== this.props.inputValue) {
    this.setState({ inputVal: this.props.inputValue })
  }
}

推荐的选项是为组件提供一个 key ，该 key 取决于应触发重置的 Prop 。然后当 props 改变时，组件状态将重新初始化:

<MyComponent initProp={someValue} key={`key_${someValue}`/>

我只推荐这些选项用于复杂状态。在大多数示例中，父组件可以保持此状态，并且内部组件可以使用回调来更新父组件的更改。