react 组件设计模式

Tue, 17 Dec 2024 00:00:00 +0800

首先我们想一个问题，那就是 为什么要学习设计模式？ 原因我总结有以下几个方面。

1. 功能复杂，逻辑复用问题。

首先 React 灵活多变性，就决定了 React 项目可以应用多种设计模式。但是这些设计模式的产生也确实办了实事:

场景一：

在一个项目中，全局有一个状态，可以称之为 theme （主题），那么有很多 UI 功能组件需要这个主题，而且这个主题是可以切换的，就像 github 切换暗黑模式一样，那么如何优雅的实现这个功能呢？

这个场景如果我们用 React 的提供者模式，就能轻松搞定了，通过 context 保存全局的主题，然后将 theme 通过 Provider 形式传递下去，需要 theme ，那么消费 context ，就可以了，这样的好处是，只要 theme 改变，消费 context 的组件就会重新更新，达到了切换主题的目的。

场景二：

表单设计场景也需要一定程度上的 React 的设计模式，首先对于表单状态的整体验证需要外层的 Form 绑定事件控制，调度表单的状态下发，验证功能。内层对于每一个表单控件还需要 FormItem 收集数据，让控件变成受控的。这样的 Form 和 FormItem 方式，就是通过组合模式实现的。

2. 培养设计能力，编程能力

熟练运用 React 的设计模式，可以培养开发者的设计能力，比如 HOC 的设计 ，公共组件的设计 ，自定义 hooks 的设计，一些开源的优秀的库就是通过 React 的灵活性和优秀的设计模式实现的。

例子：

比如在 React 状态管理工具中，无论是 react-redux ，还是 mobx-react，一方面想要把 state 和 dispatch 函数传递给组件，另一方面订阅 state 变化，来促使业务组件更新，那么整个流程中，需要一个或多个 HOC 来搞定。于是 react-redux 提供了 connect，mobx-react 提供了 inject ，observer 等优秀的 hoc。由此可见，学会 React 的设计模式，有助于开发者小到编写公共组件，大到开发开源项目。

React 组件设计模式 on Last Stand

react 组件设计模式