React：类组件静态跨实例变量的函数组件等价实现方法

要在函数组件中复现类组件static变量的跨实例持久化效果，最简洁的方式是在函数组件外部定义模块级变量——这类变量属于模块作用域，在组件的所有实例间共享，和类组件的static变量行为完全一致。

为什么之前的尝试失败？ #

• useRef/useState：这些状态是组件实例私有的，每个组件实例都会创建独立的副本，无法跨实例共享。
• 内部闭包写法：每次调用checkInitial()都会生成新的闭包环境，每个组件实例拿到的initial变量都是独立的，自然无法实现共享。

修正后的函数组件实现 #

const { useEffect, useRef } = React;

// 定义在组件外部的模块级变量，所有实例共享
let functionalFirstRun = true;

const FunctionalComponent = (props) => {
  const { id } = props;
  useEffect(() => {
    if (functionalFirstRun) {
      console.log('Initial functional component load...', id);
      functionalFirstRun = false;
    } else {
      console.log('Functional component has already been initialised.', id);
    }
  }, []); 
  return (
    <div>Hello, functional component!</div>
  );
};

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.createSomething();
  }
  
  static firstRun = true;
  
  createSomething() {
    if (ClassComponent.firstRun) {
      console.log('Initial class component load...', this.props.id);
      ClassComponent.firstRun = false;
    } else {
      console.log('Class component has already been initialised.', this.props.id);
    }
  }

  render() {
    return (
      <div>Hello, class component!</div>
    );
  }
}

function App() {
  return (
    <div>
      <ClassComponent id="class-component-1" />
      <ClassComponent id="class-component-2" />
      <ClassComponent id="class-component-3" />
      <FunctionalComponent id="functional-component-1" />
      <FunctionalComponent id="functional-component-2" />
      <FunctionalComponent id="functional-component-3" />
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"));

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

效果说明 #

修改后，函数组件的表现和类组件完全一致：只有第一个实例会输出Initial functional component load...，后续实例都会输出Functional component has already been initialised.。

注意事项 #

• 模块级变量的生命周期和模块绑定，只要模块不被卸载（比如SPA路由切换中组件卸载但模块仍存在），变量状态就会保留。如果需要重置状态，可以额外添加一个重置函数。
• 这种方式不需要Context或状态提升，也不会触发不必要的重渲染，完全符合需求。

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