React构建组件

news2025/5/15 14:44:17

React构建组件

React 组件构建方式详解

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

文章目录

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

一、基础组件类型

1. 函数组件（推荐）

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

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

2. 类组件（Legacy）

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

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

二、组件进阶构建模式

1. Hooks 增强函数组件

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

示例：

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

2. 高阶组件（HOC）

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

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

3. Render Props

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

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

4. 自定义 Hooks

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

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。
```
const MemoizedComponent = React.memo(MyComponent);
```

懒加载：React.lazy + Suspense。

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 共享隐式状态，提供灵活的组合方式。

示例：

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