react 如何导入js方法
在 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 组件中按需导入：
// 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;
}导入时无需使用花括号：
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>;
}注意事项
- 路径需正确：本地文件导入时注意相对路径（如
./或../）。 - 命名冲突：避免与组件内已有变量名重复。
- 树摇优化：使用具名导出（
export）而非默认导出（export default）时，打包工具可剔除未使用的代码。
