React函数组件中工具类的正确初始化方式

针对你的需求（工具类初始化耗时，仅需首次进入组件时执行一次初始化，后续复用实例调用renderBtn），三种方式的优劣和推荐方案如下：

• 组件外部初始化
  直接在组件文件的顶部（函数外部）实例化工具类：

  const toolInstance = new YourToolClass();
  
  function YourComponent() {
    // 直接使用 toolInstance.renderBtn()
    return <div>...</div>;
  }
  

  优点：实现最简单，实例全局唯一，无论组件挂载/卸载多少次都不会重复初始化。
  缺点：实例脱离组件作用域，如果工具类依赖组件的props、上下文或需要和组件生命周期联动，这种方式不适用。

• 组件内用useRef存储实例
  这是最推荐的方案，既能保证初始化仅执行一次，又能让实例处于组件作用域内：

  import { useRef, useEffect } from 'react';
  
  function YourComponent() {
    const toolRef = useRef(null);
  
    // 方式1：组件渲染时判断初始化
    if (!toolRef.current) {
      toolRef.current = new YourToolClass();
    }
  
    // 方式2：用useEffect（空依赖数组）初始化，支持清理逻辑
    useEffect(() => {
      toolRef.current = new YourToolClass();
      // 可选：组件卸载时清理工具类（如果有销毁方法）
      // return () => toolRef.current?.destroy();
    }, []);
  
    // 调用示例：toolRef.current.renderBtn()
    return <div>...</div>;
  }
  

  优点：初始化仅执行一次，实例可访问组件内部变量，还能在组件卸载时做资源清理，适配绝大多数场景。

• 作为useState状态变量
  完全不推荐。useState的设计目的是存储驱动组件渲染的状态数据，工具类实例不属于渲染依赖的状态，将其存入useState会触发不必要的组件重渲染，也不符合React的状态管理逻辑。

总结：

• 若工具类无组件依赖，组件外部初始化最省事；
• 若工具类需要和组件生命周期联动或依赖组件内部数据，优先用useRef结合初始化判断/useEffect的方案。

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