React函数组件如何通过外部全局变量触发useEffect执行

问题原因 #

你之前的方案无法生效的核心原因是：普通JS变量不属于React的响应式系统，修改它不会触发Main组件的重渲染，而useEffect只会在组件重渲染时才会对比依赖数组的变化，因此不会执行回调。

适配场景的解决方案 #

方案1：原生自定义事件（无额外依赖，轻量首选） #

通过浏览器的自定义事件实现跨组件通信，无需引入任何第三方库：

1. 在Main组件中挂载时监听自定义事件，卸载时移除监听

function Main() {
  const [data, setData] = useState([])
  const [refresh, setRefresh] = useState(false)

  // 绑定全局自定义事件监听
  useEffect(() => {
    const handleRefresh = () => {
      // 用函数式更新避免闭包问题
      setRefresh(prev => !prev)
    }
    window.addEventListener('refreshMainData', handleRefresh)
    // 清理监听，避免内存泄漏
    return () => window.removeEventListener('refreshMainData', handleRefresh)
  }, [])

  // 原数据请求useEffect，注意不要直接传async函数作为useEffect参数
  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(`${process.env.REACT_APP_SERVER_URL}/api/data/`)
      setData(res.data)
    }
    fetchData()
  }, [refresh])
}

2. 任意无关联组件需要触发刷新时，直接派发事件即可：

window.dispatchEvent(new CustomEvent('refreshMainData'))

方案2：全局状态管理（项目已有状态管理工具时首选） #

如果你的项目已经接入了Redux、Zustand、Jotai等全局状态管理工具，可以把刷新标识放到全局状态中：
以轻量状态库Zustand为例：

1. 定义全局store

import { create } from 'zustand'

const useGlobalStore = create((set) => ({
  refreshMainFlag: false,
  triggerMainRefresh: () => set(state => ({ refreshMainFlag: !state.refreshMainFlag })),
}))

2. Main组件订阅全局状态

function Main() {
  const refreshFlag = useGlobalStore(state => state.refreshMainFlag)
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(`${process.env.REACT_APP_SERVER_URL}/api/data/`)
      setData(res.data)
    }
    fetchData()
  }, [refreshFlag])
}

3. 其他组件调用触发方法

const triggerRefresh = useGlobalStore(state => state.triggerMainRefresh)
// 需要刷新时调用
triggerRefresh()

方案3：useSyncExternalStore（React18+ 符合你原思路的官方方案） #

如果你坚持使用外部变量的实现思路，可以用React18提供的useSyncExternalStore hook订阅外部变量变化，让外部变量的修改能触发组件重渲染：

1. 外部定义可变源和导出方法

let refreshOutside = false
const listeners = new Set()

export const refreshMainFromOutside = () => {
  refreshOutside = !refreshOutside
  // 通知所有订阅者更新
  listeners.forEach(listener => listener())
}

// 订阅方法
function subscribe(listener) {
  listeners.add(listener)
  return () => listeners.delete(listener)
}

// 获取当前值的快照
function getSnapshot() {
  return refreshOutside
}

2. Main组件中订阅外部变量

import { useSyncExternalStore } from 'react'

function Main() {
  const [data, setData] = useState([])
  // 订阅外部变量
  const refreshOutside = useSyncExternalStore(subscribe, getSnapshot)

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(`${process.env.REACT_APP_SERVER_URL}/api/data/`)
      setData(res.data)
    }
    fetchData()
  }, [refreshOutside])
}

其他组件直接导入refreshMainFromOutside调用即可触发刷新。

额外注意 #

你原代码中直接给useEffect传入async函数是错误写法，async函数返回的Promise会被React当作清理函数，会引发控制台警告，正确写法是把异步逻辑封装到useEffect内部的异步函数中再执行。

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