推荐答案
在 React 中，常用的组件设计模式包括：
- 容器组件与展示组件模式（Container/Presentational Pattern）
- 高阶组件模式（Higher-Order Component Pattern, HOC）
- 渲染属性模式（Render Props Pattern）
- 复合组件模式（Compound Components Pattern）
- 受控组件与非受控组件模式（Controlled/Uncontrolled Components Pattern）
- 自定义 Hook 模式（Custom Hook Pattern）
本题详细解读
1. 容器组件与展示组件模式（Container/Presentational Pattern）
- 容器组件：负责处理逻辑、数据获取和状态管理，通常不直接渲染 UI。
- 展示组件：负责渲染 UI，接收来自容器组件的 props，通常是无状态的。
这种模式有助于分离关注点，使代码更易于维护和测试。
2. 高阶组件模式（Higher-Order Component Pattern, HOC）
- 高阶组件：是一个函数，接收一个组件并返回一个新的组件。常用于复用组件逻辑，如身份验证、日志记录等。
- 示例：
withAuth(Component)，用于检查用户是否已登录。
3. 渲染属性模式（Render Props Pattern）
- 渲染属性：通过一个函数 prop 来动态决定组件的渲染内容。常用于共享逻辑或数据。
- 示例：
<DataProvider render={data => <Component data={data} />} />
4. 复合组件模式（Compound Components Pattern）
- 复合组件：通过多个组件协同工作，形成一个完整的 UI 功能。常用于构建复杂的 UI 组件，如 Tabs、Accordion 等。
- 示例：
<Tabs><Tab>Tab 1</Tab><Tab>Tab 2</Tab></Tabs>
5. 受控组件与非受控组件模式（Controlled/Uncontrolled Components Pattern）
- 受控组件：组件的状态由 React 管理，通常通过
value和onChange属性来控制。 - 非受控组件：组件的状态由 DOM 管理，通常通过
ref来访问 DOM 元素的值。
6. 自定义 Hook 模式（Custom Hook Pattern）
- 自定义 Hook：通过封装逻辑到自定义 Hook 中，实现逻辑的复用。自定义 Hook 是一个函数，名称以
use开头。 - 示例：
useFetch(url)，用于封装数据获取逻辑。
这些设计模式各有优缺点，开发者应根据具体场景选择合适的设计模式。