构建React/Redux应用程序以提高效率

Question

我正在构建一个音频工作站应用程序，将显示包含剪辑的曲目表。现在，我有一个表缩减器，它返回一个表对象。表对象包含轨迹对象，而轨迹对象包含剪辑对象。我有一个订阅表存储的TableContainer。我的问题是，我认为我的应用程序效率会很低，因为每次添加或操作剪辑时，它都会重新渲染页面。实际上，只有剪辑所在的特定轨道需要重新渲染，对吗？我如何构建我的应用程序，而不是每一个小的更改都会重新呈现整个应用程序？

Answer 1

在任何组件的mapStateToProps中，不要选择作为一个整体的父对象发送到组件。如果可能，选择特定的属性，一直到叶值。如果您的TableContainer的render()本身不使用tracks数组，那么它们要确保只传递您使用的兄弟属性。

因此，不是：

function mapStateToProps(state, props) {
  return {
    table: state.tables[props.tableId];
  }
}

执行以下操作：

function mapStateToProps(state, props) {
  let table = state.tables[props.tableId];
  return {
    name: table.name, 
    type: table.type
  };

这使得React Redux在确定您的组件是否需要重新渲染时更具鉴别力。它将看到，尽管table由于clip更改而更改，但name和type都没有更改。

但是，由于您的Table组件可能也呈现Track组件，因此您可能无法避免呈现调用。如果树上的任何属性被更改，tracks数组也会被更改。

这种情况下的解决方案是让tracks数组不包含整个track对象，而只包含一个轨迹is列表。然后，您可以将曲目存储在表的旁边，其中一个的更改不会影响另一个。请注意，只有当您不去获取并传递Table组件的mapStateToProps中的track对象时，这才起作用。您应该使Track组件接受其ID而不是实际对象作为道具。这样，Table组件就完全不依赖于曲目的内容了。

Answer 2

react的强大功能是只重新呈现需要的内容(通过使用虚拟DOM进行比较和shouldComponentUpdate函数)。

在它成为性能问题之前，我不会过多地研究它。

如果是这样，我会将曲目存储在一个单独的目录中，而不会将其传递给app (main)组件。在你的Clip组件的mapStateToProps函数中(如果你使用react-redux)，从状态获取轨迹，因为你从道具中获得了它的名称。这样，如果磁道变化很大(例如，因为异步获取切片)，则只会更新组件。