React构建组件

React 组件构建方式详解

React 组件的构建方式随着版本迭代不断演进，目前主要有 函数组件 和 类组件 两种核心模式，并衍生出多种高级组件设计模式。以下是完整的构建方式指南：

文章目录

React构建组件
- - [React 组件构建方式详解](#React 组件构建方式详解)
  - 一、基础组件类型
  - - [1. **函数组件（推荐）**](#1. 函数组件（推荐）)
    - [2. **类组件（Legacy）**](#2. 类组件（Legacy）)
  - 二、组件进阶构建模式
  - - [1. **Hooks 增强函数组件**](#1. Hooks 增强函数组件)
    - [2. **高阶组件（HOC）**](#2. 高阶组件（HOC）)
    - [3. **Render Props**](#3. Render Props)
    - [4. **自定义 Hooks**](#4. 自定义 Hooks)
  - 三、组件设计原则
  - - [1. **单一职责原则**](#1. 单一职责原则)
    - [2. **状态管理策略**](#2. 状态管理策略)
    - [3. **性能优化手段**](#3. 性能优化手段)
    - [4. **组件通信方式**](#4. 组件通信方式)
  - 四、组件架构模式
  - - [1. **原子设计（Atomic Design）**](#1. 原子设计（Atomic Design）)
    - [2. **容器与展示分离**](#2. 容器与展示分离)
    - [3. **复合组件（Compound Components）**](#3. 复合组件（Compound Components）)
  - 五、最佳实践总结

一、基础组件类型

1. 函数组件（推荐）

特点：纯函数实现，无生命周期和状态（需配合 Hooks）。
适用场景：展示型组件、逻辑简单或需高度复用的组件。

jsx 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. 类组件（Legacy）

特点：基于 ES6 Class，可管理状态和生命周期方法。
适用场景：旧项目维护、需要 Error Boundaries 的场景。

jsx 复制代码

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

二、组件进阶构建模式

1. Hooks 增强函数组件

核心 Hooks：
- useState：管理组件状态。
- useEffect：处理副作用（替代生命周期）。
- useContext：访问 Context。

示例：

jsx 复制代码

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

2. 高阶组件（HOC）

作用：复用组件逻辑（如权限校验、日志记录）。
实现：接收组件，返回增强后的新组件。

jsx 复制代码

function withLogger(WrappedComponent) {
  return function(props) {
    useEffect(() => {
      console.log('Component rendered:', WrappedComponent.name);
    }, []);
    return <WrappedComponent {...props} />;
  };
}
const EnhancedComponent = withLogger(MyComponent);

3. Render Props

作用：通过 props 传递渲染逻辑，实现组件复用。

jsx 复制代码

<MouseTracker>
  {({ x, y }) => <div>Cursor at ({x}, {y})</div>}
</MouseTracker>

4. 自定义 Hooks

作用：将组件逻辑提取为可复用的函数。

jsx 复制代码

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
  useEffect(() => {
    const handler = () => setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return size;
}

三、组件设计原则

1. 单一职责原则

每个组件只负责一个独立功能。
拆分大型组件为多个小型组件。

2. 状态管理策略

本地状态 ：使用 useState 或 useReducer。
全局状态：结合 Context API 或 Redux。

3. 性能优化手段

Memoization ：React.memo（函数组件）、useMemo、useCallback。
jsx 复制代码
```
const MemoizedComponent = React.memo(MyComponent);
```

懒加载 ：React.lazy + Suspense。

jsx 复制代码

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

4. 组件通信方式

父传子：Props 传递。
子传父：回调函数。
跨层级：Context API 或状态管理库。

四、组件架构模式

1. 原子设计（Atomic Design）

分层结构：Atoms（按钮/输入框） → Molecules（表单） → Organisms（导航栏） → Templates → Pages。

2. 容器与展示分离

容器组件：管理数据逻辑（Class 或 Hooks）。
展示组件：仅负责 UI 渲染（优先使用函数组件）。

3. 复合组件（Compound Components）

特点：通过 Context 共享隐式状态，提供灵活的组合方式。

示例：

jsx 复制代码

<Tabs>
  <TabList>
    <Tab>First</Tab>
    <Tab>Second</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Content 1</TabPanel>
    <TabPanel>Content 2</TabPanel>
  </TabPanels>
</Tabs>

五、最佳实践总结

优先使用函数组件：结合 Hooks 实现所有功能。
合理拆分组件：避免单个组件超过 200 行代码。
类型安全：使用 TypeScript 定义 Props 和 State。
测试驱动：搭配 Jest + React Testing Library 编写单元测试。
代码规范：通过 ESLint + Prettier 保持代码风格一致。
合理拆分组件：避免单个组件超过 200 行代码。
类型安全：使用 TypeScript 定义 Props 和 State。
测试驱动：搭配 Jest + React Testing Library 编写单元测试。
代码规范：通过 ESLint + Prettier 保持代码风格一致。