使用扩展运算符将所有道具传递给反应组件是否会产生性能成本

wnt*_*wrk 5 javascript components reactjs react-native

目前,我发现自己编写了很多组件,如下所示:

export default class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      someState1: 'something',
      someState2: 'something',
      someState3: 'something'
    }
  }
  render() {
    return (
      <ComponentOne prop1={this.someState1} {...this.props}/>
      <ComponentTwo prop2={this.someState2} {...this.props}/>
      <ComponentThree prop3={this.someState3} {...this.props}/>
    )
  }
}
Run Code Online (Sandbox Code Playgroud)

更高级别的状态照常通过道具传递并传播到子组件中。

在某些情况下,我发现我将所有 props 分散到每个子组件中,因为它比指定 props 更快/更容易。

所以问题是:

  1. 将所有 props 分散到每个组件中是否会产生性能成本,即使可能有 10 个子组件?
  2. 我应该更具体地说明传递给每个组件的 props 吗?
  3. 对每个子组件都这样做有什么缺点吗?