面试题：React中如何实现组件的模块化

Question

请阐述在React项目里，实现组件模块化的常用方式有哪些，比如从文件结构、导入导出等方面说明，并举例简单代码示例。

Answer 1

文件结构

1. 按功能模块划分：将相关功能的组件放在同一个文件夹下。例如，创建一个 user 文件夹，里面存放与用户相关的组件，如 UserList.js、UserDetail.js 等。
2. 按组件类型划分：可以分为 components 文件夹存放通用组件，pages 文件夹存放页面组件。

导入导出方式

1. 默认导出与导入
   • 导出代码示例：

// Button.js
import React from'react';

const Button = () => {
    return <button>点击我</button>;
};

export default Button;

- **导入代码示例**：

// App.js
import React from'react';
import Button from './Button';

const App = () => {
    return (
        <div>
            <Button />
        </div>
    );
};

export default App;

2. 命名导出与导入
   • 导出代码示例：

// MathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

- **导入代码示例**：

// Main.js
import React from'react';
import { add, subtract } from './MathUtils';

const Main = () => {
    const result1 = add(2, 3);
    const result2 = subtract(5, 2);
    return (
        <div>
            <p>加法结果: {result1}</p>
            <p>减法结果: {result2}</p>
        </div>
    );
};

export default Main;