如何写出更好的Angular组件

组件特征：单一职责，可重用性

组件设计步骤：

1. 识别组件关注点：混合型组件可能有多个关注点；

   组件关注点一般有：

   1. 状态管理 (State management)
   2. 用户页面展示 (UI presentation)
   3. 业务逻辑 (Business logic)
   4. 数据获取 (Data fetching)
   5. 用户行为交互 (User interaction)

   当混合型组件规模越来越大时，需要考虑将组件分为表现型和容器型；

2. 将组件分为表现型组件（Presentational）和容器型组件（Container）：

3. 尽量减少容器型组件的使用：

   1. 可重用性
   2. 可维护性
   3. 优化性：多使用表现型组件可极大提升性能优化

两种组件类型：

1. 表现型组件：只接受父组件的输入数据Input，类似纯函数：输出只与输入相关，数据有可预测性，不在内部使用业务逻辑。
   1. 一般不要更改Input：若Input属性是引用类型，在父组件改变不会触发表现层组件同步更新；
   2. 不要用side-effect：(what is side effect?)如果需要交互数据，使用@output触发输出事件
   3. 不要使用业务service注入：剥离业务逻辑
2. 容器型组件：在组件内部有业务逻辑，可使用内部生成的数据，数据不可预测。