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

小编典典

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

reactjs

说我有一个父组件和一个子组件。

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

阅读 230

2020-07-22

共1个答案

小编典典

通常传递所有道具不是一个好主意。更多的道具意味着更多的事情，这些事情将导致子组件不必要地重新渲染。但是，在这些道具的子集上使用散布运算符可能
会很方便。例如，父组件可能会收到很多道具，但是并没有使用大部分道具，而是将一个或两个道具全部交给了子组件。考虑使用类似redux-form的示例：

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

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

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

实际上，我想说的是，如果您发现自己经常将道具传递到层次结构中，则可能是设计上的问题，应该更有效地利用redux存储。

2020-07-22