javascript - Reactjs:更新特定行

Question

我想了解在 Reactjs 中实现价格/深度阶梯 GUI 的最有效方法的建议。

每个阶梯代表一只股票，每行代表每个价格的可用尺寸和交易量:

我当前使用的解决方案使用列表(存储在 class.state 中)来呈现 stock 表的行。此列表中的每个项目代表库存表中的一行。每个渲染都会迭代此列表以输出图片中显示的表格。

    var items = [];
    for (const sid in this.state.stocks) {
        const rows = this.state.stocks[sid];
        items.push(
            <div key={sid} style={{float: 'left'}}>
                <Ladder
                    rows={rows}
                />
            </div>
        );
    }
    // doRender
    return (
        < div id={'container'}>
            {items}
        </div>
    );
`

价格经常更新，而 GUI 却很难跟上。我相信这是因为每次更新都会重新绘制所有表行。不管怎样，我的解决方案在负载下表现不佳。

我想优化更新并确保仅呈现/处理受影响的行。

Answer 1

为了提高 UI 的性能，我建议执行以下操作:

1. 当行没有变化时，阶梯不需要重新渲染。您可以使用 shouldComponentUpdate 将其作为组件来比较行或纯组件，并使用 recompose utils 来执行此操作。
2. 如果每个梯子有很多行，那么不应该进行深度比较(这会消耗资源)，而只是比较实例本身，例如:

shouldComponentUpdate(nextProps) {
   return this.props.rows !== nextProps.rows;
}

为此，您需要正确更新行。如果有任何行发生变化，那么梯子的行需要是一个新的数组，否则，保持相同的数组对象。

该行还需要是带有 shouldComponentUpdate 的组件，以确保不需要时不会重新渲染。

看起来你的数据结构相当复杂，所以尝试使用 redux，你会更好地测试它。