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

为了提高用户界面的性能，我建议遵循以下事项：

1. 当行没有变化时，梯形图不需要重新渲染。您可以使用shouldComponentUpdate将其作为组件来比较行或纯组件，并使用重构实用程序来执行此操作。
2. 如果每个Ladder有很多行，那么不应该进行深度比较（消耗资源），而只是比较实例本身，如：

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

要做到这一点，您需要正确更新行。如果有任何行被更改，那么梯形图的行需要是一个新数组，否则，保持相同的数组对象。

1. 该行还需要是一个带有shouldComponentUpdate的组件以确保，如果不需要，则不会重新呈现。
2. 看起来你的数据结构非常复杂，所以尝试使用redux，你会更好地测试它。