构建我的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对象，而只包含一个Track ID列表。 然后，您可以将轨道存储在表旁边，并且其中一个更改不会影响另一个。 请注意，这仅在您不去获取和传递Table组件的mapStateToProps中的track对象mapStateToProps 。 您应以接受其ID而不是将实际对象作为道具的方式制作Track组件。 这样， Table组件完全不依赖于轨道的内容。

Answer 2

react的功能是仅重新呈现需要的内容（通过使用虚拟DOM进行比较和shouldComponentUpdate函数）。

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

如果是这样，我会将曲目存储在一个单独的目录中，而不将其传递给应用程序（主）组件。 在Clip组件的mapStateToProps函数中（如果您使用react-redux），从道具中获取状态名称时，从状态中获取轨道。 这样，如果轨道变化很大（例如，由于异步获取切片），则只有组件会更新。