前端 - react 是否可以做一个全局的一个工具Util，然后在任何组件下不需要引入就可以直接使用？

Question

1、react 是否可以做一个全局的一个工具Util，然后在任何组件下不需要引入就可以直接使用？ 如果可以请问应该如何实现呢？

Uitl.getAData()
Util.fetchApi()

2、请问在项目中是否推荐这样：不引入就可以使用的情况呢？

Answer 1

1. 使用unplugin-auto-import是最优解

下面是个人使用的基础模板, 里面就有用到这个, 可做参考
https://github.com/lincenying/vite-react-mobx/

2. 在编辑器配置相关插件后, 是推荐的

比如vscode, 配置了 https://github.com/antfu/vscode-goto-alias.git , 按住alt再点击该函数, 是可以正常跳转到原函数的

另外插件会生成一个auto-imports.d.ts文件, 里面包含所有不需要导入,即可直接使用的函数/变量

当然也有不方便的时候, 比如别的同事接触这个项目时, 就会懵逼, 这个函数哪来的, 如果是本地写的函数, 还可以搜索, 但是如果是第三方库, 就会比较尴尬

这个就看团队了

Answer 2

不推荐在项目中使用全局变量的方式，因为这会导致代码的可维护性和可读性下降，增加了全局命名冲突的风险。推荐使用 React Context 或模块导入或自定义Hook的方式

1.使用全局变量(不推荐）

// 在某个初始化文件中
window.Util = {
  getAData: function() {
    // 实现
  },
  fetchApi: function() {
    // 实现
  }
};

在组件中引入

// 在组件中
const data = window.Util.getAData();
window.Util.fetchApi();

2.使用 React Context

// UtilContext.js
import React, { createContext, useContext } from 'react';

const UtilContext = createContext();

export const UtilProvider = ({ children }) => {
  const util = {
    getAData: () => {
      // 实现
    },
    fetchApi: () => {
      // 实现
    }
  };

  return (
    <UtilContext.Provider value={util}>
      {children}
    </UtilContext.Provider>
  );
};

export const useUtil = () => useContext(UtilContext);

在组件中引入

// 在组件中
import { useUtil } from './UtilContext';

const MyComponent = () => {
  const { getAData, fetchApi } = useUtil();

  const data = getAData();
  fetchApi();

  return <div>{data}</div>;
};

3.使用模块导入

// util.js
export const getAData = () => {
  // 实现
};

export const fetchApi = () => {
  // 实现
};

在组件中引入

// 在组件中
import { getAData, fetchApi } from './util';

const data = getAData();
fetchApi();

4.使用自定义 Hook

// useUtil.js
import { useCallback } from 'react';

export const useUtil = () => {
  const getAData = useCallback(() => {
    // 实现
  }, []);

  const fetchApi = useCallback(() => {
    // 实现
  }, []);

  return { getAData, fetchApi };
};

在组件中引入

//在组件中
import { useUtil } from './useUtil';

const MyComponent = () => {
  const { getAData, fetchApi } = useUtil();

  const data = getAData();
  fetchApi();

  return <div>{data}</div>;
};

补充

如果你的项目规模较大且复杂，或者需要高度的可测试性和灵活性，可以使用第三方状态管理库和依赖注入。大多数中小型项目，使用 React Context、自定义 Hook 或模块导入。

5.使用第三方状态管理库

// actions.js
export const getAData = () => {
  return {
    type: 'GET_A_DATA',
    payload: {
      // 实现
    }
  };
};

export const fetchApi = () => {
  return {
    type: 'FETCH_API',
    payload: {
      // 实现
    }
  };
};

在组件引入

// 在组件中
import { useDispatch } from 'react-redux';
import { getAData, fetchApi } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();

  const data = dispatch(getAData());
  dispatch(fetchApi());

  return <div>{data}</div>;
};

6.使用依赖注入（Dependency Injection）

// util.js
export const getAData = () => {
  // 实现
};

export const fetchApi = () => {
  // 实现
};

// container.js
import { Container } from 'inversify';
import { getAData, fetchApi } from './util';

const container = new Container();
container.bind('getAData').toConstantValue(getAData);
container.bind('fetchApi').toConstantValue(fetchApi);

export default container;

在组件中引入

// 在组件中
import container from './container';

const getAData = container.get('getAData');
const fetchApi = container.get('fetchApi');

const data = getAData();
fetchApi();

另外如果你特别是在使用Vite、Webpack、Rollup 等构建工具时。它可以自动引入 API，减少手动导入的繁琐工作。

unplugin-auto-import

Answer 3

在 window 上挂载即可

window.Util = Util

TS 类型注释：

// index.d.ts
declare const Utils: typeof import("some-module").Utils

其他方法：unplugin-auto-import

推荐使用 unplugin-auto-import 实现