React 导入与导出

在 React 中，导入（import）和导出（export）用于管理模块化的 JavaScript 代码，让我们来看一下在 React 中如何使用它们：

导入（import）

在 React 中，通常使用 ES6 的模块化语法来导入依赖项。有两种主要的导入方式：

• 默认导入（Default Imports）：

默认导入用于导入一个模块的默认导出。例如，导入 React 组件时通常使用默认导入。

import React from 'react';
import ReactDOM from 'react-dom';

在上面的例子中，import React from 'react'; 导入了 React 库的默认导出，而 import ReactDOM from 'react-dom'; 导入了 ReactDOM 库的默认导出。

• 命名导入（Named Imports）：

命名导入用于导入模块中非默认导出的具名函数、类或常量。

import { Component, useState, useEffect } from 'react';

在上面的例子中，import { Component, useState, useEffect } from 'react'; 从 React 库中导入了 Component、useState 和 useEffect 等命名导出。

导出（export）

在 React 组件或其他 JavaScript 模块中，可以使用不同的导出方式：

• 默认导出（Default Export）：

默认导出用于导出一个模块的主要功能或对象。一个模块只能有一个默认导出。

// MyClass.js
class MyClass {
  // class implementation
}
export default MyClass;

在上面的例子中，export default MyClass; 导出了 MyClass 类作为这个模块的默认导出。

• 命名导出（Named Export）：

命名导出用于导出多个具名函数、类或常量。

// utils.js
export function formatDate(date) {
  // function implementation
}
export const MAX_COUNT = 10;

在上面的例子中，export function formatDate(date) { ... } 和 export const MAX_COUNT = 10; 分别导出了 formatDate 函数和 MAX_COUNT 常量作为命名导出。

组合使用导入与导出

可以在 React 组件中组合使用导入与导出，例如：

// Button.js
import React from 'react';
function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}
export default Button;

在这个例子中，Button 组件被默认导出，以便在其他地方可以通过 import Button from './Button'; 来使用它。

总结

导入与导出在 React 开发中非常常见，它们使得代码更加模块化、易于维护和重用。理解如何正确地导入和导出组件、函数和常量是开发 React 应用程序的重要一环。