当前位置：首页 > React

react 如何导入js方法

2026-02-12 10:46:12React

在 React 中导入 JavaScript 方法

React 支持通过 ES6 的模块化语法导入 JavaScript 方法，以下是常见的几种场景和实现方式：

从本地文件导入方法

假设有一个名为 utils.js 的文件，其中导出了一个或多个方法：

// utils.js
export function add(a, b) {
  return a + b;
}

export const multiply = (a, b) => a * b;

在 React 组件中按需导入：

react 如何导入js方法

// ReactComponent.jsx
import { add, multiply } from './utils';

function Example() {
  const sum = add(1, 2); // 调用导入的方法
  const product = multiply(3, 4);
  return <div>{sum}, {product}</div>;
}

导入默认导出方法

如果方法在源文件中是默认导出（export default）：

// mathUtils.js
export default function square(x) {
  return x * x;
}

导入时无需使用花括号：

react 如何导入js方法

import square from './mathUtils';

function Example() {
  const result = square(5); // 25
  return <div>{result}</div>;
}

从第三方库导入方法

许多第三方库（如 Lodash）提供工具方法，可通过包管理器安装后导入：

npm install lodash

在组件中使用：

import { debounce } from 'lodash';

function SearchBox() {
  const handleSearch = debounce(() => {
    console.log('Search triggered');
  }, 300);

  return <input onChange={handleSearch} />;
}

动态导入（按需加载）

通过 import() 语法实现代码分割：

function LazyComponent() {
  const [utils, setUtils] = useState(null);

  useEffect(() => {
    import('./utils').then(module => {
      setUtils(module);
    });
  }, []);

  if (!utils) return <div>Loading...</div>;
  return <div>{utils.add(1, 3)}</div>;
}