React构建组件

React构建组件

React 组件构建方式详解

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

---

一、基础组件类型

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>
  

---

五、最佳实践总结

1. 优先使用函数组件：结合 Hooks 实现所有功能。

2. 合理拆分组件：避免单个组件超过 200 行代码。

3. 类型安全：使用 TypeScript 定义 Props 和 State。

4. 测试驱动：搭配 Jest + React Testing Library 编写单元测试。

5. 代码规范：通过 ESLint + Prettier 保持代码风格一致。

6. 合理拆分组件：避免单个组件超过 200 行代码。

7. 类型安全：使用 TypeScript 定义 Props 和 State。

8. 测试驱动：搭配 Jest + React Testing Library 编写单元测试。

9. 代码规范：通过 ESLint + Prettier 保持代码风格一致。