假设我有一个父组件和一个子组件。
将props有十个按键，但孩子需要只有三个。
将props传递给子组件的更好方法是什么？
class Parent extends Component {
render() {
{ /*pass all the ten keys into child*/ }
<Child {...this.props} />
}
}
或者
class Parent extends Component {
render() {
{ /*pass only the needed keys into child*/ }
<Child key1={key1} key2={key2} key3={key3}/>
}
}
传递所有props通常不是一个好主意。更多的props意味着更多的东西会导致子组件不必要地重新渲染。但是，在这些 props的子集上使用扩展运算符会很方便。例如，一个父组件可能会收到很多 props，但并不使用其中的大部分，而是将除了一两个之外的所有props交给子组件。考虑这个使用类似 redux-form 的例子：
export function Form({ handleSubmit, ...rest }) {
return (
<form onSubmit={handleSubmit}>
<Field name="name" component={FormInput} />
<SaveButton {...rest} />
</form>
);
}
外部表单组件只关心提交功能。指示表单是否脏、有效等的其他props将被 用于<SaveButton />确定是否禁用按钮。
这很方便，因为我们不必为不使用它们的组件声明 props。我们只是通过它们。但如前所述，请谨慎使用此模式，确保您知道实际传递的是哪些props，因为它可能会导致性能问题甚至副作用。
事实上，我什至要说，如果您发现自己经常在层次结构中向下传递 props，那么您可能遇到了设计问题，应该更有效地利用您的 redux 存储。
不，这通常是个坏主意。一般来说，最好只传递组件所需的内容：
您可以使用 lodash 的_.pick功能：
<Child {...(_.pick(this.props, ['key1', 'key2', ...]))} />