javascript - 如何保持组件在后台运行以使用react？

Question

我有一个时钟(间隔)组件，当用户访问网页时时间开始，但是当用户移动到其他页面并返回时钟页面时，计时器会重新开始。
如何让时钟组件在后台运行，以便无论用户访问哪个网页，计时器都应该继续运行？
先感谢您
时钟组件

function Clock(props) {

    const [time, setTime] = useState(0);

    const run = true;

    useEffect(()=>{
        if (run=== true && time < 1440){
            var timerID = setInterval(() => tick(time),1000);

            return function cleanup(){
                clearInterval(timerID);
            };
        }
    },[run, time]);

    function tick(time){
        setTime(time + 10);
        console.log(time);
    }

    return (
        <div className="clock-space">
            <div className="clock">{time}</div>            
        </div>
    );
}

应用组件(调用时钟补偿)

return (
            <div className="box">
                <Header />
                <PageMenu name={this.state.page} data={this.changePageNameToDefault.bind(this)}/>
                <Clock />
                {renderComp}
            </div>

Answer 1

后台没有运行。我想这里的问题是您以某种方式启动了组件的重新渲染。这取决于您在应用程序中使用哪种路由，以及它是否应该记住重新访问/重新加载页面的时间。
如果您使用某种路由器(react-router，...)，您可能只是重构您的代码，以便时钟组件在路由器的渲染过程之外。否则你可能想使用 context ( useContext , createContext )，它存储你的计时器。大致如下:

// TimerContext.tsx
const TimerContext = React.createContext();

const TimeProvider = (props) => {
    const [time, setTime] = useState(0);
    const run = true;

    useEffect(()=>{
        if (run=== true && time < 1440){
            var timerID = setInterval(() => tick(time),1000);

            return function cleanup(){
                clearInterval(timerID);
            };
        }
    },[run, time]);

    function tick(time){
        setTime(time + 10);
        console.log(time);
    }


    const value = {
        run,
        time
    }
    return <TimerContext.Provider value={value} {...props} />
}

const useTimer = () => useContext(TimerContext)

// ClockComponent.tsx
const Clock = (props) => {
    const {time} = useTimer();

    return (
        <div className="clock-space">
            <div className="clock">{time}</div>            
        </div>
    );
}

不要忘记在渲染层次结构顶部的某个位置渲染 TimeProvider。
如果您没有路由框架或重新加载有问题，您必须使用 localStorage(或其他类型的客户端存储)。真的没有其他方法(除了与服务器通信)来保持计时器导航您的页面。
您也可以将这两种方法结合起来。