reactjs - 在 React 中，将所有 props 从父组件传递给子组件是一个好习惯吗？

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

传递所有 Prop 通常不是一个好主意。更多的 props 意味着更多的东西会导致子组件不必要地重新渲染。但是，在这些 props 的子集上使用展开运算符可能会很方便。例如，父组件可能会收到很多 props，但不会使用其中的大部分，而是将除一两个之外的所有 props 交给子组件。考虑这个使用 redux-form 之类的例子:

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

外部表单组件只关心提交函数。 <SaveButton /> 将使用其他属性来指示表单是否脏、有效等。确定是否禁用该按钮。

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

事实上，我什至想说，如果您发现自己经常在层次结构中传递 props，那么您可能存在设计问题，应该更有效地利用您的 redux 存储。