一个页面，可以在一个组件中完成，也可以先对功能进行拆分，抽象出可复用的零件，再反过来用这些零件拼凑出页面。

零件的好处显而易见，我们来看一个搜索的例子，最简单的场景是 ”输入框“ + ”搜索结果“，如下：

<div class="search">
    <SimpleSearchInput />
    <SearchResult />
    <Pager />
</div>

我们知道，各大搜索引擎其实支持复杂的搜索条件，因此除了 SimpleSearchInput，我们还需要 ComplexSearchForm。

<div class="search">
    <ComplexSearchForm />
    <SearchResult />
    <Pager />
</div>

除了搜索框，也许 PM 还想定制一下搜索结果的样式，于是你会写出 ASearchResult，BSearchResult，写完之后，简单的替换就行了，这对后人再说，真是再幸福不过。

<div class="search">
    <ComplexSearchForm />
    <ASearchResult />
    <Pager />
</div>

把组件想象成零件，我认为是非常恰当的，一个零件坏了，可以换一个零件，只要保证尺寸接口一致就行。同理，一个组件不满足需要，只需换一个接口相同的组件。

这里的重点是：接口相同。

接口相同有两层含义：

1. 组件接收的数据是确定的，比如输入框组件接收 value、placeholder、onSubmit 等数据。
2. 组件对外提供的方法是确定的，比如翻页组件会提供 getPage、setPage等方法。

此外，组件还可以向外发射事件，不过事件是轻耦合的，组件具体会发射什么事件，不应该强求，但可以做一些约定。