ReactJS中如何将所有函数存入单文件并在组件中继承复用（类比AngularJS全局服务）

React没有内置和AngularJS完全对等的全局服务继承机制，但有两种成熟的原生方案可以实现「公共函数统一存储、所有组件均可调用」的需求，覆盖AngularJS全局服务的全部使用场景：

• 方案1：公共工具模块（适配无状态的纯工具函数）
  直接创建独立的公共文件统一存放所有工具函数，通过ES6模块化导出，组件按需导入即可使用，不需要继承。
  代码示例：

// 全局服务文件 src/utils/common.js
export const formatAmount = (num) => {
  return `¥${Number(num).toFixed(2)}`
}
export const debounce = (func, delay) => {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), delay)
  }
}

组件内使用：

// 任意组件内调用
import { formatAmount, debounce } from '@/utils/common'

function OrderList() {
  return <div>订单金额：{formatAmount(199)}</div>
}

该方案的优势是支持Tree Shaking，打包时会自动剔除未被使用的函数，有效减少产物体积，适合纯工具类无状态逻辑复用。

• 方案2：Context API + 自定义Hook（适配带状态的全局单例服务，更接近AngularJS服务体验）
  如果你的全局服务需要携带共享状态（比如全局用户信息、主题配置），可以用React内置的Context API封装单例服务，配合自定义Hook实现全局调用。
  代码示例：

// 全局服务文件 src/services/globalService.js
import { createContext, useContext, useState, useMemo } from 'react'

const GlobalContext = createContext()

// 根组件注册用的Provider
export function GlobalServiceProvider({ children }) {
  // 全局共享状态
  const [userInfo, setUserInfo] = useState(null)
  // 全局公共方法
  const login = (userData) => setUserInfo(userData)
  const logout = () => setUserInfo(null)
  const getAuthStatus = () => !!userInfo?.token

  const service = useMemo(() => ({
    userInfo,
    login,
    logout,
    getAuthStatus
  }), [userInfo])

  return <GlobalContext.Provider value={service}>{children}</GlobalContext.Provider>
}

// 组件调用用的自定义Hook
export const useGlobalService = () => useContext(GlobalContext)

首先在项目入口文件注册服务：

// 入口文件 src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { GlobalServiceProvider } from './services/globalService'

ReactDOM.createRoot(document.getElementById('root')).render(
  <GlobalServiceProvider>
    <App />
  </GlobalServiceProvider>
)

任意组件内调用：

import { useGlobalService } from '@/services/globalService'

function UserProfile() {
  const { userInfo, getAuthStatus, logout } = useGlobalService()
  if (!getAuthStatus()) return <div>请先登录</div>
  return (
    <div>
      <p>用户名：{userInfo.nickname}</p>
      <button onClick={logout}>退出登录</button>
    </div>
  )
}

该方案的服务为单例模式，状态全局共享，状态更新会自动同步到所有调用的组件，完全覆盖AngularJS全局服务的使用场景。

补充说明：React官方遵循「组合优于继承」的设计理念，不推荐通过类继承的方式复用逻辑，上述两种方案都是符合React设计规范的原生实现，灵活度和可维护性都优于类继承方案。

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