React在极端套接字更新时执行缓慢

Question

我正在构建一个交易应用程序，在服务器端使用node，在客户端使用react。我目前面临的问题是关于频繁更新的反应性能。

我的流程描述如下。

我遇到的最常见的情况是有两个表显示期权数据看涨和看跌。每个表最少有两行，最多有8行，所以我们一次最多有16行。每行最多可以有30列。

为了更新，我使用了套接字连接。每当选项列中的任何一个发生简单更改时，都会从套接字服务器发出一个事件，我将在客户端侦听该事件。

通过套接字在客户端获取数据后，我可以搜索更新数据的特定行和列，然后使用旧数据和新数据重新构建所有16行的整个数据，然后调度操作。。。这种更新非常频繁，就像每毫秒1000次更新中的100次一样，因此整个表被重新渲染，导致我的应用程序速度减慢。

我正在使用redux来管理我的react应用程序中的状态

Answer 1

这里有一个纯组件的例子，每秒更新约100次没有问题：

const { useState, memo, useEffect, useRef } = React;
const COLUMS = 31;
const ITEM_COUNT = COLUMS * COLUMS;
const TIMER = 10;
const COLORS = ['red', 'green', 'blue'];
const nextColor = ((current) => () =>
COLORS[++current % COLORS.length])(0);
const next = ((num) => () => ++num % ITEM_COUNT)(-1);
const Item = memo(function Item({ color }) {
return (
<td
style={{
border: '1px solid black',
minWidth: '20px',
minHeight: '20px',
backgroundColor: color,
transitionDuration: '2s',
transitionTimingFunction: 'ease-out',
transitionProperty: 'color, background-color',
}}
>
&nbsp;
</td>
);
});
const Row = memo(function Row({ items }) {
return (
<tr>
{items.map((item) => (
<Item key={item.id} color={item.color} />
))}
</tr>
);
});
const App = () => {
const r = useRef(0);
r.current++;
const [data, setData] = useState(
new Array(ITEM_COUNT)
.fill('')
.map((_, id) => ({ id, color: 'red' }))
.reduce((result, item, index) => {
if (index % COLUMS === 0) {
result.push([]);
}
result[result.length - 1].push(item);
return result;
}, [])
);
useEffect(() => {
const i = setInterval(
() =>
setData((data) => {
const change = next(), //id to change
color = nextColor(); //new value for color
return data.map(
(items) =>
//do not update items if id is not in this row
items.find(({ id }) => id === change)
? //update the one item that has id of change
items.map(
(item) =>
item.id === change
? { ...item, color } //change the color
: item //return the item unchanged
)
: items //id is not in this row return items unchanged
);
}),
TIMER
);
return () => clearInterval(i);
}, []);
return (
<div>
<h1>rendered: {r.current}</h1>
<table>
<tbody>
{data.map((items, index) => (
<Row key={index} items={items} />
))}
</tbody>
</table>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

我不知道你为什么如此频繁地重新渲染你的组件，但你可以尝试限制对redux存储的更新。通过这种方式，您可以向用户显示所有最新数据，而不会使CPU负担过重。

您可以使用throttle-debounce包来限制套接字回调。只有在自上次调用以来经过给定间隔的情况下，对节流函数的后续调用才会成功。