在 useEffect 中每秒执行数千次事件处理程序是否存在问题？

Question

抱歉（可能是）新手问题，我在电子应用程序中有这个简单的反应代码：

const MainScreen = () => {
 const [values, setValues] = useState<number[]>([]); // 4 float values
 useEffect(() => {
    window.sensor.onRawData((data) => {
      setValues(data);
    });
    return () => {
      window.sensor.offRawData();
    };
 }, []);

..........
}

从 Electron IPC 接收事件并更新状态变量，当我减慢发送线程并接收 100 条消息/秒时，一切都很好，但是当我收到 1000/2000+ 消息/秒时，React 将开始显示此警告：

**Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.**

不知道为什么，React 中函数每秒调用次数有限制吗？

谢谢！

Answer 1

React 中函数每秒必须调用的次数有限制吗？

不，不完全是一个限制，更像是 React 执行其操作的开销。

考虑一下：每次调用

setValues

React 时都必须将此元素和子树标记为过时，安排重新渲染并应用自上次渲染以来发生的 100-200 个状态更改。

然后，运行组件中的代码，创建返回的子树并将其与旧子树进行比较，并将更改应用到 DOM。

你要求大量的反应/你的计算机每秒完成所有这些 1000-2000 次。

如果您的更新量如此之大，我可以建议采用不同的方法：

useEffect(() => {
    let tmp = values;

    window.sensor.onRawData((data) => {
        // tracking the latest values
        tmp = data;
    });

    // updating the state with the latest values (and forcing a rerender) 
    // at most every 100ms.
    const interval = setInterval(setValues, 100, () => tmp);

    return () => {
        window.sensor.offRawData();
        clearInterval(interval);
    };
}, []);