React构建组件

最新推荐文章于 2025-05-16 18:05:00 发布

大象吃香蕉

最新推荐文章于 2025-05-16 18:05:00 发布

阅读量1.1k

点赞数 12

分类专栏：前端知识点文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/2203_75479159/article/details/147957316

版权

前端知识点专栏收录该内容

35 篇文章

订阅专栏

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>