反应应用程序不在选项卡时不运行使用效果

Question

我有一个反应应用程序通过套接字接收所有订阅客户端的更新，

当收到新的套接字消息时，我将触发一个调度操作

io.on(EVENT, ({ someData }) => { 
  console.log(newDate());
  dispatch(handleEventUpdate(someData)); 
});

只有当标签焦点焦点时，此操作才会发射。 日期日志也与选项卡聚焦的确切时间相匹配，有什么想法即使在选项卡未聚焦时也能执行吗？

由于我认为问题不在焦点时没有运行，因此我目前正在尝试使用服务工作者的方法来处理此问题，但我不确定从哪里开始。

语境

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ChildComp from './ChildComp';


import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ChildComp from './ChildComp';
const ParentComp = () => {
const { data } = useSelector(
        (state) => state,
    );
  return <ChildComp data={data} />;
};
export default ParentComp;


import React, { useEffect } from 'react';
const ChildComp = ({ data }) => {
    useEffect(() => {
        console.log('state changed');
        console.log(data);
        return () => {
            console.log('component cleanup');
        };
    },  [data]);
    return <p> {data} </p>;
};
export default ChildComp;


The parent gets the state data and passes to the child component. The update doesn't reflect if the tab isn't in focus until you go back to the tab.

Answer 1

您可以通过添加依赖项来尝试以下代码。 这里的问题是你没有提供足够的代码......

io.on(EVENT, ({ someData }) => { 
  console.log(newDate());
  dispatch(handleEventUpdate(someData)); 
}, [/*a value of foucus and not foucus that changes ! that will rerender the component*/]);