当您使用 React.js 或 React Native 时,您很快就会注意到组件带来的魔力和灵活性。 组件通过将用户界面分解为可重复使用的代码,使我们的代码更容易阅读和理解。
将组件组织带到下一个层次
为了进一步推进这些想法,我们可以将我们的组件分为两个类别。这两个类别有几个名称,概念略有不同,但所有这些组件都有相同的核心想法。分割组件的原始想法由丹·阿布拉莫夫提出,他称之为智能和愚蠢,但后来修改了它们,以称之为容器和演示组件。
除了智能和愚蠢以及容器和演示器,你可能听说过它们作为功能和类组件,脂肪和瘦,屏幕和组件等在本文中,我们将把它们称为智能和愚蠢的组件。
什么使一个组件聪明或愚蠢?
<$>[注意]智能组件是执行函数和管理数据的应用级组件,而愚蠢的组件只关注用户界面。
在我们沉浸在智能和愚蠢组件的定义特征之前,想一想下面的注册表格中的哪些组件会被认为是智能的,哪些会被认为是愚蠢的。
<$>[注] 智能组件专注于事物的运作方式。
智能部件的常见特征包括:
- 操纵数据 智能组件可以收集、捕捉更改并传递应用数据
- 调用 Redux、生命周期方法、API、库等 这些组件因某种原因被称为智能! 它们负责调用图书馆和功能
- 管理状态 智能组件负责管理状态,并知道何时重新渲染组件
- 很少包括造型 因为模糊的组件专注于造型,它允许智能组件专注于功能,而无需风格的混乱
<$>[注] 愚蠢的组件专注于事物的外观。
愚蠢组件的常见特征:
- 专注于 UI 几乎所有基本的 UI 组件都应该被认为是模糊的组件。 示例包括加载器、模糊、按钮、输入等
- 接受模糊的组件接受模糊,以便它们能够动态和可重复使用。 例如,您可以从主组件发送模糊的按钮标题,以允许它具有独特的名称
- 不需要应用程序依赖 除了 UI 包,如
Reactstrap,模糊的组件不需要依赖 - 很少包括状态 唯一一个模糊的组件具有状态的例子是操纵 UI 本身,而不是应用数据。
让我们从前看看我们的登录表格示例,几乎每个组件都可以是可重复使用的愚蠢组件,包括容器,标题,输入和按钮。
分割组件的好处
可重复使用 ↓
虽然我们可以在应用程序的不同位置多次写出类似的组件,但我们可以通过构建一个可重复使用的组件来节省大量的时间。
想想一个应用程序,其中包括登录,登录,忘记密码,帐户设置,并为打击,一个事件登录表格!这是很多输入!而不是构建每个所需实例的输入,我们可以创建一个可重复使用的模糊组件来导入每个屏幕,并从主组件发送奖励,使每个输入动态。
灵活易于做出改变。
将智能和模糊的组件分开允许灵活地对应用程序进行小规模和大规模的更改,而无需大量的劳累。
让我们想想一下我们上面的例子一秒钟,如果我们想为整个应用程序添加或更改输入边界的颜色,那么如果我们没有为我们的输入使用一个模糊的组件,我们可能需要在输入的每个单个位置更改该边界。
代码可读性
简单地说,你拥有的代码越少,你的代码就越有组织,不仅你更容易理解你的代码,其他人也更容易沉浸并了解正在发生的事情。
提供一致性和防止重复
当我们构建应用程序时,在一个项目中重复自己和其他人,甚至以完全不同的方式重建一些不需要的东西非常容易。
简化决策 ↓
由于我们所有的用户界面组件都分为模糊的组件,我们可以轻松地将所有用户界面组件放到一个屏幕上,您的客户端,网页设计师或图形设计师可以同时看到一切。
易于测试 ↓
愚蠢的组件很容易测试,因为它们只是接入附件并返回用户界面的一块,这使得对愚蠢的组件进行非常简单的单元测试。
何时开始
无论您是刚刚开始一个新项目,还是多年来一直在项目中,从来没有太晚开始实施这种类型的组件分离。
通常在启动项目时,我喜欢在我的src文件夹中创建文件夹来组织组件,甚至在开始构建第一个组件之前。
当然,如果这是一个旧的项目,你想实施这个组织,一个好的Ole的重构器可能是医生命令的。
有没有人说过复兴派对?