React：将整个状态传递给另一个组件有意义吗？答案

【问题标题】：React: Does it make sense to pass the whole state to another component?React：将整个状态传递给另一个组件有意义吗？
【发布时间】：2019-07-02 08:34:31
【问题描述】：

我正在重构一个中等大小的应用程序，大约 20k 行代码分布在 20 个组件中。应用程序的整个状态涵盖了 200 多个属性，为了更快，我通过将整个状态传递给我的子组件来构建应用程序。现在我担心页面的速度。

我想要简短易读的组件。如果我决定传递单个属性，我将拥有一些具有 50 个或更多属性的组件。为了加快速度，这样做有意义吗？

感谢您的帮助

【问题讨论】：

如果状态是一个对象，它是通过引用传递的，所以我认为它对性能没有影响。如果您想为整个应用程序使用一般状态，我建议您使用 Redux：redux.js.org
或者，如果使用反应钩子，使用useContext。我发现this 文章对我很有用
您应该使用redux 将状态保持在一个级别，并且子组件可以使用他们需要的变量。 - react-redux.js.org
欢迎来到stackoverflow！可能是时候考虑一下你应该把你的状态放在哪里了，但目前的情况也可能没问题！因为我不知道您的应用程序的确切状态，所以我只是建议一些阅读材料。根据官方文档优化性能：reactjs.org/docs/optimizing-performance.html 可能有用。我还发现 Dan Abramov 关于 redux (medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) 的文章非常有用。它可能会帮助您理解为什么应该（或不应该）使用全局状态管理。

标签： javascript reactjs state

【解决方案1】：

从模式的角度来看，使用像 redux 这样的全局状态管理在组件之间共享状态比将状态传递给子级要干净得多。在其他一些情况下，解决方案甚至更简单，并且仍然不需要传递状态。

【讨论】：

【解决方案2】：

是的

React 只会渲染自上次渲染以来所做的更改，如果您的子元素的某些部分没有被修改，它们将不会重新渲染到 DOM。

举个例子：

  <Content
        accounts={this.state.accounts}
        showBalance={this.state.showBalance}
        withdraw={this.state.withdraw}
        deposit={this.state.deposit}
        current={this.state.current}
        depositAmount={this.state.depositAmount}
        handleDeposit={this.state.handleDeposit}
        handleRm={this.state.handleRm}
        amounts={this.state.amounts}
        getWithdraw={this.state.getWithdraw} 
  />

可以替换为

<Content {...this.state} />

【讨论】：