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

Question

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

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

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

不，这通常是个坏主意。一般来说，最好只传递组件所需的内容：

1. 确定组件是否已更改所需的道具更少
2. 更容易理解组件的作用
3. 您可以静态分析组件需要什么，重构变得更容易

您可以使用 lodash 的_.pick功能：

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