React中用模块级变量留存组件状态值是否为正确实现模式？

你的代码确实能实现“卸载后重新渲染计数器继续递增”的需求，但这种基于模块私有变量的实现存在明显局限性，并不推荐作为通用模式：

当前实现的问题 #

• 实例冲突风险：模块级变量counterInitial是全局共享的，如果页面中同时存在多个Counter组件实例，它们会共用这个变量，导致计数互相干扰，完全失去组件的独立性。
• 状态不可控：变量保存在模块作用域中，只要模块未被卸载（React中模块通常会一直驻留内存），即使CounterController组件被销毁再重建，counterInitial的值也会保留，可能不符合“重新进入页面时重置计数”的预期。
• 违反React状态管理原则：组件的状态逻辑被分散在模块和组件内部，不符合React单向数据流的设计理念，降低了代码的可维护性和复用性。

更合适的替代方案：状态提升到父组件 #

React中最推荐的做法是将共享/需要持久的状态提升到控制组件的父级，由父组件统一管理状态，再通过props传递给子组件。这种方式完全避免了模块变量的问题，同时符合React的设计模式：

修改后的代码实现 #

Counter.js（改为函数组件，更符合现代React实践）

import React, { useEffect, useRef } from 'react';

export default function Counter({ count, onIncrement }) {
  // 用useRef保存定时器和动画帧ID，避免重复创建
  const timerIdRef = useRef(null);
  const animationFrameRef = useRef(null);

  useEffect(() => {
    function run() {
      timerIdRef.current = setTimeout(() => {
        onIncrement();
        animationFrameRef.current = requestAnimationFrame(run);
      }, 1000);
    }
    animationFrameRef.current = requestAnimationFrame(run);

    // 组件卸载时清理定时器和动画帧
    return () => {
      clearTimeout(timerIdRef.current);
      cancelAnimationFrame(animationFrameRef.current);
    };
  }, [onIncrement]);

  return <p>Valore contatore: {count}</p>;
}

CounterController.js（接管状态管理）

import { useState } from "react"
import Counter from "./Counter"

export default function CounterController(){
    const [contatoreRunning, setContatoreRunning] = useState(true);
    // 父组件管理计数器的核心状态
    const [count, setCount] = useState(0);

    const changeCounterState = () => {
        setContatoreRunning(!contatoreRunning);
    }

    const handleIncrement = () => {
        // 使用函数式更新确保获取最新的状态值
        setCount(prevCount => prevCount + 1);
    }

    return (
        <>
            <button onClick={changeCounterState}>
                {contatoreRunning ? "Stop" : "Avvia"}
            </button>
            {contatoreRunning && <Counter count={count} onIncrement={handleIncrement} />}
        </>
    )
}

额外扩展：持久化到本地存储 #

如果需要页面刷新后仍保留计数，可以结合localStorage实现持久化，只需修改CounterController的状态初始化和更新逻辑：

// 初始化时从localStorage读取，不存在则设为0
const [count, setCount] = useState(() => {
    return Number(localStorage.getItem('counterValue')) || 0;
});

const handleIncrement = () => {
    setCount(prevCount => {
        const newCount = prevCount + 1;
        localStorage.setItem('counterValue', newCount);
        return newCount;
    });
}

内容的提问来源于stack exchange，提问作者Nick