如何在React函数组件中创建与组件生命周期一致的非状态变量？

我正在构建一个渲染3D动画的组件，过程中需要一些大体积变量，这些变量需在组件挂载时声明，卸载时销毁。（因此不能直接在函数组件体内声明变量，因为每次重新渲染都会销毁并重建它）并且每个组件实例都需要拥有独立的变量实例（因此不能在模块文件的全局作用域中声明）。

我可以将其声明为状态变量，但从性能角度来看这不是好方法，因为这会占用不必要的资源，且没有组件需要订阅这些变量。

在类组件中，这些变量的定义方式如下伪代码所示：

class MyComponent extends React.Component {
  myHeavyVariable = getMyHeavyVariable();
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    // setup my myHeavyVariable
  }
  ...
  render() {
    // use myHeavyVariable before rendering
    ...
  }
}

那么在React函数组件中该如何实现呢？

解决方案 #

在函数组件中，可通过useRef配合useEffect实现完全等价的效果，完美匹配你的需求：

核心思路 #

1. 用useRef存储变量：useRef创建的引用对象，其.current属性在组件整个生命周期内持久化，且修改不会触发重渲染，同时每个组件实例拥有独立的引用对象。
2. 用useEffect管控生命周期：空依赖数组的useEffect确保初始化逻辑仅在挂载时执行一次，其返回函数可在组件卸载时清理变量、释放资源。

示例代码 #

import { useRef, useEffect } from 'react';

function MyComponent() {
  // 声明引用存储大体积变量，初始值设为null
  const myHeavyVariableRef = useRef(null);

  useEffect(() => {
    // 组件挂载时初始化大体积变量
    myHeavyVariableRef.current = getMyHeavyVariable();
    
    // 执行变量的初始化配置（对应类组件的componentDidMount逻辑）
    // myHeavyVariableRef.current.setup();

    // 组件卸载时清理资源（对应类组件的componentWillUnmount逻辑）
    return () => {
      // 调用变量的销毁方法或直接置空释放内存
      // myHeavyVariableRef.current.destroy();
      myHeavyVariableRef.current = null;
    };
  }, []); // 空依赖数组确保仅挂载/卸载时执行

  // 在渲染逻辑中使用变量（注意需判断变量是否已初始化）
  if (!myHeavyVariableRef.current) {
    return <div>加载中...</div>;
  }

  // 基于大体积变量渲染3D动画内容
  return <div>{/* 3D动画渲染逻辑 */}</div>;
}

方案优势 #

• 实例隔离：每个组件实例的useRef对象独立，变量不会跨实例干扰。
• 性能最优：无需订阅状态，修改ref.current不触发重渲染，避免不必要的资源消耗。
• 生命周期对齐：完全复刻类组件中变量的挂载创建、卸载销毁逻辑。

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