设计模式
您是否曾经在一个团队中对如何实现某些功能没有清晰的想法？这是开发人员的常见情况，所以很多时候我们都在处理类似的功能，总是使用“对象”定义，处理表单的新屏幕，或者执行新请求以从数据库中获取数据列表，所有这些情况都是设计模式有用的例子。
什么是设计模式？
我理解这样的设计模式：
当我处理一些常见功能时，一种明确的完成工作的方法
我喜欢这个定义 sourcemaking.com
在软件工程中，设计模式是针对软件设计中常见问题的通用可重复解决方案。设计模式不是可以直接转换为代码的完成设计。它是关于如何解决问题的描述或模板，可以在许多不同的情况下使用。
作为工程师，我们喜欢知道如何做这些事情，我们需要了解我们工作的预期结果是什么，设计模式可以帮助我们。我们可以想象我们正在与这么多令人难以置信的高级开发人员一起工作，并利用他们的专业知识，他们提出了一种完成我们工作的方法，那就是一种设计模式，对我们来说，这是一种定义和优化的工作方式。
设计模式的类型
存在很多设计模式，这些可以分为 3 种类型：
- 创造的 ：为类或对象实例化设计的模式
- 结构 : 关于结构和组成的模式
- 行为的 ：关于一个类如何与其他类进行交流而设计的模式
让我们谈谈 React.Js 中的模式
React 作为 UI 库是使用 JavaScript 组成用户界面 (UI) 的常用方法，当我们使用 React 时，我们将通过将其分成小的可重用组件来创建整个 UI，这是 组件化 .
我将介绍一些我在 React 中常用的设计模式。
单例模式
单例是可以实例化一次的类，并且可以全局访问，这个实例可以在我们的应用程序中共享。
如果您是 React 开发人员，可能您会看到一些熟悉的全局状态管理器行为，例如 Redux、EasyPeasy、MobX，它们都是在我们的应用程序中拥有全局状态的不同方式，它基本上是单例模式，我们将拥有我们的状态的唯一实例，并且状态在整个应用程序中共享。
你有没有看到？状态管理是我们应用程序中的一个常见问题，一些开发人员理解这一点并使用此设计模式修复它
提供者模式
在某些情况下，我们希望在某些特定组件中提供数据，但可能我们没有实现状态管理器库，或者我们需要使用不同的方法。
在 React 中，我们可以将 props 传递到组件树的下方，但如果您需要在组件树中向上传递 props，则存在限制，它的名称是 prop Drill。
在反应中，您可以创建一个新的 上下文提供者 ，它是一个管理整个应用程序上下文的对象，要操作上下文，您可以使用钩子 (useContext) 来实现此提供程序模式
容器/表示模式
这是一种强制分离关注点的方法，主要思想是将视图与应用程序逻辑分离。
我们可以定义 表示组件， 这些是需要注意的组件 如何 向用户显示数据，并定义 容器组件 ，这些是需要注意的组件 什么 数据显示给用户。
如果您在图像列表中思考，我们可以定义一个 容器组件 使用 api 服务获取数据的所有逻辑，并定义一个 表示组件 使用所有 jsx 代码来显示数据。
钩子图案
这是我最喜欢的！
React 16.8 引入了一个新特性，叫做 挂钩。
这种模式是派生的 容器/表示模式 ，因为是相同的想法，但使用钩子实现，所以我们将创建一个包含有关如何显示数据的所有实现的组件，然后定义一个钩子，其中包含与 表示组件 .
在这个钩子中，我们可以控制与逻辑相关的所有内容，例如：与服务的交互、UI 中的用户事件或表单验证。
其他常见的设计模式
HOC Pattern（高阶组件），该模式是在多个组件中复用相同逻辑的常用方式，用于给组件添加功能或逻辑
代理模式，使用这种模式，我们可以定义更多控制对象中的交互。我们可以在对象定义上定义函数。
结论
最后，设计模式并不难理解，它们之所以存在，是因为当我们编码时，我们不断地解决相同的场景，它们为我们提供了一种定义和确认的方式来实现解决方案。
来源
模式 ：了解最新的设计和性能模式。 — https://www.patterns.dev/
源头制作 : 我是SourceMaking。我会告诉你很多关于优秀软件的故事……—— https://sourcemaking.com/design_patterns
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/22306/37360709
标签：定义,模式,React,组件,设计模式,我们 From： https://www.cnblogs.com/amboke/p/16664200.html