组件化框架中对组件的一点理解

变换（Transformation）

设计 React 的核心前提是认为 UI 只是把数据通过映射关系变换成另一种形式的数据。同样的输入必会有同样的输出。这恰好就是纯函数。

一个纯的组件基本的职能应该包括：

1. 维护一个对应视图的状态。
2. 将状态与外部提供的属性合并后通过一个幂等的函数转换为视图结构。
3. 响应用户在界面上的交互。
4. 针对用户的交互调用业务的逻辑，进而更新状态以达到视图变化的目的。

抽象（Abstraction）

你不可能仅用一个函数就能实现复杂的 UI。重要的是，你需要把 UI 抽象成多个隐藏内部细节，又可复用的函数。通过在一个函数中调用另一个函数来实现复杂的 UI，这就是抽象。

关于组件的封装

在一个有界面的系统中，越贴近界面的部分越难以抽象、维护、测试，这是亘古不变的真理。 而组件因为它的定位与核心职能的原因，肯定是非常接近视图的，所以组件本身就不是一个易用抽象、维护、测试的单元。你越往组件里塞东西，你就有越多的东西陪着组件一起陷入难以抽象、难以维护、难以测试的深坑中。