理解 React 中的组合模式

百变鹏仔 3天前 #JavaScript

文章标签组合

react 的组合模式是一个基本的设计概念，它使程序员能够通过将组件连接在一起来创建模块化、可重用的组件。与继承相反，组合专注于融合离散的、独立的部分，以生成复杂的用户界面 (ui)，从而提高程序的可扩展性、可读性和重用性。

在本文中，我们将深入探讨组合模式、它的好处，以及如何通过实际示例在 react 中应用它。

1。什么是构图模式？

传统面向对象编程中代码重用的一种常见技术是继承。尽管如此，组合是一种在 react 中组织和重新利用组件的适应性更强的方法。组合使我们能够将组件作为 props 发送到其他组件，这使得创建具有更多结构灵活性的可重用用户界面成为可能。

简单来说，组合就是通过组装组件来构建 ui，而不是继承其他组件的行为。

2。 ui 组件中的继承问题

继承会导致组件之间的紧密耦合，从而使管理和扩展代码变得更加困难。如果父组件需要更新，则其所有子组件都会受到影响。这会导致灵活性和可维护性降低。

react 鼓励组合而不是继承，因为：

1️⃣ 它可以更好地分离关注点。

2️⃣ 组件可以重用，而不必过度依赖共享基类。

3️⃣ 它提供了对渲染逻辑更精细的控制。

3。 react 中组合的基本示例

让我们看一个如何在 react 中使用组合模式的基本示例。

父组件

function layout({ header, content, footer }) {  return (    <div>      <header>{header}</header><main>{content}</main><footer>{footer}</footer></div>  );}

使用布局组件

function app() {  return (    <layout header="{&lt;header"></layout>}      content={<content></content>}      footer={<footer></footer>}    /&gt;  );}

在此示例中，布局组件使用组合来渲染作为 props 传递的不同部分（页眉、内容和页脚）。这比在布局内硬编码这些部分更灵活。

4。儿童道具：构图的核心部分

在 react 中实现组合的最常见方法之一是通过 children 属性。这个特殊的 prop 允许组件动态地将内容传递到嵌套组件中。

使用 children prop 的示例

function card({ children }) {  return <div classname="card">{children}</div>;}function app() {  return (    <card><h1>title</h1>      <p>this is a description inside the card.</p>    </card>  );}

在此示例中，card 组件充当容器，用于包装传递到其中的所有子内容。这种模式非常适合需要包装或增强其他组件或元素的组件。

5。通过组合实现专业化

除了简单地组合组件之外，您还可以使用组合来专门化组件。当您想要创建通用组件的更具体版本而不修改原始组件时，这非常有用。

示例：专用按钮组件

function button({ children, type }) {  const classname = type === 'primary' ? 'btn-primary' : 'btn-secondary';  return <button classname="{classname}">{children}</button>;}function primarybutton({ children }) {  return <button type="primary">{children}</button>;}function secondarybutton({ children }) {  return <button type="secondary">{children}</button>;}function app() {  return (          <primarybutton>save</primarybutton><secondarybutton>cancel</secondarybutton>&gt;  );}

在这里，我们通过组合基本 button 组件创建了两个专用按钮组件（primarybutton 和 secondarybutton）。这种技术可以让您避免重复并确保整个应用程序的一致性。

6。插槽图案

槽模式是组合模式的另一种变体，其中组件接收多个“槽”（区域）来渲染 ui 的不同部分。这对于更复杂的布局特别有用。

插槽模式示例

function modal({ title, body, footer }) {  return (    <div classname="modal">      <div classname="modal-header">{title}</div>      <div classname="modal-body">{body}</div>      <div classname="modal-footer">{footer}</div>    </div>  );}function app() {  return (    <modal title="{&lt;h2">modal title}      body={<p>this is the modal content.</p>}      footer={<button>close</button>}    /&gt;  );}</modal>

这里，modal 组件有多个槽（标题、正文和页脚），可以传入不同的内容，从而在构建 ui 时提供更大的灵活性。

7。高阶组件 (hoc) 和渲染道具

组合也是更高级 react 模式的核心，例如高阶组件 (hoc) 和渲染道具。这些模式通常用于跨组件共享逻辑，而无需诉诸继承。

高阶组件示例

function withLogger(Component) {  return function WrappedComponent(props) {    console.log('Component is rendered');    return <component></component>;  };}const EnhancedComponent = withLogger(MyComponent);

withlogger hoc 通过组合向 mycomponent 添加日志记录功能。您可以在其他组件中重用此行为，而无需更改其结构。

8。 react 中组合的好处

组合模式具有几个主要优点：

↳ 可重用性：组件设计为可在应用程序中重用，减少重复。

↳ 灵活性：您可以将不同的内容传递给组件，而无需修改其内部结构。

↳ 可维护性：由于组件是松散耦合的，更新一个组件并不一定会影响其他组件。

↳ 可读性：组合组件可以促进更清晰、更模块化的结构，使代码更易于阅读和维护。

结论

创建可扩展、适应性强和可维护的 react 用户界面的基础是组合模式。无论您是创建简单的组件还是复杂的用户界面，有效使用组合都可以保证您的组件保持模块化和可重用性。插槽模式、子属性和专业化技术可用于为您的应用程序构建极其动态和适应性强的组件。

文章推荐

理解 React 中的组合模式

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？