函数组件中如何替代this将自身传递给静态类？

函数组件不存在类组件那样的this实例，你不需要传递整个组件，只需要把需要的状态更新方法（或逻辑）暴露给全局对象即可，以下是具体实现方式：

方案1：直接存储状态更新函数 #

直接将useState返回的更新函数赋值给GlobalParam，外部通过该函数直接修改状态：

import GlobalParam from './GlobalParam'
import { useState, useEffect } from 'react';

const TopPage = (props) =>{
  const [load, setLoad] = useState(false);

  useEffect(() =>{
    // 将状态更新函数存入全局对象
    GlobalParam.setTopPageLoad = setLoad;

    // 组件卸载时清理引用，避免内存泄漏
    return () => {
      GlobalParam.setTopPageLoad = null;
    };
  }, [])
}

外部调用示例：

// 任意位置调用更新状态
GlobalParam.setTopPageLoad(true);

方案2：封装多方法到对象（适用于多个外部调用需求） #

如果组件有多个需要外部调用的方法，可封装成一个对象存入全局，同时用useCallback保证方法引用稳定：

import GlobalParam from './GlobalParam'
import { useState, useEffect, useCallback } from 'react';

const TopPage = (props) =>{
  const [load, setLoad] = useState(false);
  
  // 用useCallback确保方法引用不随组件重渲染变化
  const setLoading = useCallback((value) => {
    setLoad(value);
  }, []);

  const resetLoading = useCallback(() => {
    setLoad(false);
  }, []);

  useEffect(() =>{
    GlobalParam.topPageApi = {
      setLoading,
      resetLoading
    };

    // 组件卸载清理
    return () => {
      GlobalParam.topPageApi = null;
    };
  }, [setLoading, resetLoading])
}

外部调用示例：

GlobalParam.topPageApi.setLoading(true);
GlobalParam.topPageApi.resetLoading();

注意事项 #

• 必须清理全局引用：组件卸载时一定要将GlobalParam中的对应属性置为null，否则会残留引用导致内存泄漏，甚至在组件已卸载时调用更新函数引发报错。
• 优先使用React原生通信方案：这种全局对象的方式会增加组件耦合度，非必要场景建议使用React Context、状态管理库（如Zustand、Redux）或props传递，这些更符合React的设计模式。

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