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

Im构建一个音频工作站应用程序，该应用程序将显示包含剪辑的轨道表。现在我有一个表格减速器，它返回一个表格对象。表格对象包含轨道对象，轨道对象包含剪辑对象。我有一个TableContainer订阅表存储。我的问题是我相信我的应用程序效率不高，因为每次添加或操作剪辑时它都会重新渲染页面。实际上，只有剪辑所在的特定轨道需要重新渲染对吗？我该如何构建我的应用程序，以便每个小改动都不会呈现整个应用程序？构建我的React/Redux应用程序以提高效率

来源

2016-10-28 stack_pooper

反应的力量只是重新呈现需要的东西（通过使用虚拟DOM进行比较和shouldComponentUpdate函数）。

在成为性能问题之前，我不会过多考虑它。

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

来源

2016-10-28 06:44:12

在任何组件的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 
    };

这使得阵营终极版更加挑剔的，当涉及到确定你的组件是否需要重新呈现。它会看到即使table由于clip更改而发生更改，但name和type都没有更改。

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

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

来源

2016-10-28 10:33:31 DDS

如果我需要那些对于渲染页面不重要的信息，该怎么办。就像一个剪辑需要知道其他剪辑在轨道上的位置，但它不需要在剪辑移动时重新渲染。 –

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

回答

相关问题