如何使用闭包实现值持久化？React函数组件重渲染场景疑问

答案是可以，但这类方法都有明显局限性，仅适合特定场景，具体实现方式如下：

1. 模块级变量 #

在组件外部定义模块作用域的变量，它会在组件多次渲染、甚至卸载再挂载后保持值的持久化——因为模块级作用域的生命周期和整个应用一致。

示例代码：

// 组件外部定义的模块级变量
let count = 0;

function Counter() {
  const increment = () => {
    count++;
    console.log("当前计数：", count);
    // 注意：直接修改这个变量不会触发React重渲染，React无法感知它的变化
  };

  return (
    <button onClick={increment}>点击计数</button>
  );
}

• 缺点：变量是全局共享的，若页面中有多个Counter组件实例，它们会共用同一个count值，状态会互相干扰。

2. 组件静态属性 #

把变量挂载到函数组件本身的静态属性上，本质和模块级变量类似，但变量归属更清晰。

示例代码：

function Counter() {
  const increment = () => {
    // 初始化或更新静态属性
    Counter.count = (Counter.count || 0) + 1;
    console.log("当前计数：", Counter.count);
  };

  return <button onClick={increment}>点击计数</button>;
}

• 缺点：同样是多个组件实例共享状态，无法实现实例隔离的持久化。

关键注意事项 #

• 这类方法无法触发React组件重渲染，因为React的更新机制依赖state或ref的变更通知。如果需要UI同步显示这个持久化的值，还是得结合state触发更新，但单纯要在闭包中保留值的话，这些方法是可行的。
• 如果需要实现每个组件实例独立的持久化状态，不使用ref或state几乎做不到——React函数组件每次渲染都会创建新的函数作用域，没有内置的实例关联机制，借助外部存储（比如WeakMap）也需要用ref获取实例标识，这就违反了不使用ref的要求。

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