electron 在useEffect中每秒执行数千次事件处理程序有问题吗？

8ljdwjyq 于 2023-10-14 发布在 Electron

关注(0)|答案(1)|浏览(153)

对不起（可能）新手的问题，我在电子应用程序中有这个简单的React代码：

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

..........
}

从Electron IPC接收事件并更新状态变量，当我减慢发送线程并接收100 msg/sec时一切正常，但当我将接收1000/2000+ msg/sec时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中，一个函数每秒必须被调用多少次有限制吗？
谢谢你，谢谢

electron

来源：https://stackoverflow.com/questions/77196528/is-there-problem-on-executing-an-event-handler-thousand-of-times-a-second-inside

1条答案

按热度按时间

b1zrtrql1#

在React中，一个函数每秒必须被调用多少次有限制吗？
不，不完全是一个限制，更像是react做它所做的事情的开销。
考虑一下这个：每次你调用setValues react都必须将这个元素和子树标记为过时，安排一次重新渲染-最终，应用自上次渲染以来发生的100-200次状态更改，在组件中运行代码，创建并将返回的子树与旧的子树进行比较，并将更改应用于DOM，然后可能触发浏览器端的布局，样式和重新渲染。
你要求大量的React/你的计算机每秒做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);
    };
}, []);

最后，无论你的电脑有多快，你的传感器可以产生多少值/秒，你的显示器可以渲染多少FPS;屏幕上有多少新值/s可以 * 你 * 处理？

赞(0）回复(0）举报 2023-10-14

我来回答

electron 在useEffect中每秒执行数千次事件处理程序有问题吗？

1条答案

相关问题

热门标签

最新问答