reactjs - 这是将 Prop 传递给 React 中的子组件的好方法吗？

Question

在 React 中，通常我们通过以下方式将 props 传递给子组件:

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child foo={foo} bar={bar} baz={baz} /> (1)

目前我想到了另一种方法来做到这一点:

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child {...{ foo, bar, baz }} /> (2)

IMO，(2) 节省了大量时间和打字工作。然而:

1. (2) 有什么缺点吗？例如，(2) 是否被视为 React 反模式？
2. 我知道在没有测量的情况下谈论性能是不好的，但我想知道 (2) 是否存在任何损害性能的问题？

更新 1:我在 Parent 的 Prop 中添加了 myFoo, myBar, myBaz。请注意，我不想将所有 Prop 传播到子组件，因为这被认为是导致子组件中不必要 Prop 的不良做法。

Answer 1

您可以将代码重写为:

const Parent = (props) => <Child {...props} />

这实际上在 React 中很常见。如果您在其他地方需要 foo、bar 或 baz，您可以这样写:

const Parent = (props) => {
  const { foo, bar, baz } = props;
  // do something with foo, bar or baz
  return <Child {...props} />;
}

回到你的问题:

1) 不，这不是反模式，但您应该改用上述方法(到目前为止，我从未在任何项目中看到与您的示例类似的代码)。一个缺点可能是您现在实际上不再传递给 Child 的内容，并且您可能传递的内容超出您的需要。例如。 Parent 的 props 可以有一个额外的字段，比如 faz，你只需将它传递给 Child，它就会永远不要使用它。

2) 我在这里想不出任何有意义的性能问题。在我的项目中，我经常使用这种方法，而且我从未注意到任何性能问题。