这是将道具传递给 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) 节省了大量时间和打字工作。然而：

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

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

Answer 1

唯一的缺点是有时很难理解，通过使用方法一，您可以使代码更易读和明确。当可读你应该坚持第一个（一个一个地声明每个道具）。

检查这个 eslint-react-plugin 规则 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md 它总结了为什么最好使用第一种方法。

Answer 2

为什么会被认为是反模式？毕竟这是传播运算符有用的地方，对吧？
你不应该关心性能。这将被转换为普通的旧 javascript 无论如何（通过 babel 或类似的东西）。这只是语法糖。

Answer 3

您可以将代码重写为：

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

这是将道具传递给 React 中的子组件的好方法吗？

Is this a good way to pass props to child component in React?

spread

ecmascript-6

reactjs

react-props