Question

假设我有一个父组件和一个子组件。

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}/>
  }
}

Answer 1

通过所有道具通常不是一个好主意。更多道具意味着会导致子组件不必要地重新渲染的更多事物。但是，可以方便地在这些道具的子集上使用扩展运算符。例如，父组件可以接收许多道具，但是不使用它们中的大多数，而是将除了一个或两个之外的所有道具交给子组件。考虑使用像redux-form这样的例子：

export function Form({ handleSubmit, ...rest }) {
  return (
    <form onSubmit={handleSubmit}>
      <Field name="name" component={FormInput} />  
      <SaveButton {...rest} />
    </form>
  );
}

外部表单组件只关心提交功能。 <SaveButton />将使用指示表单是否脏，有效等的其他道具来确定是否禁用该按钮。

这很方便，因为我们避免为不使用它们的组件声明道具。我们只是通过他们。但如前所述，请谨慎使用此模式，确保您知道您实际传递的道具，因为它可能会导致性能问题甚至是副作用。

事实上，我甚至会说如果你发现自己经常通过层次结构传递道具，你可能会遇到设计问题，应该更有效地利用你的redux商店。

Answer 2

一般来说，只需将组件传递给它所需要的更好：

确定组件是否已更改所需的道具较少。
更容易理解组件的功能。

您可以使用lodash＆＃39; _.pick功能：

<Child {...(_.pick(this.props, ['key1', 'key2', ...]))} />

在React中，将所有道具从父组件传递到子组件是一种好习惯吗？

2 个答案: