展示组件&容器组件

image.png

React哲学

根据UI划分组件层级

如何确定应该将哪些部分划分到一个组件中呢？
你可以将组件当作一种函数或者是对象来考虑，根据单一功能原则来判定组件的范围。也就是说，一个组件原则上只能负责一个功能。如果它需要负责更多的功能，这时候就应该考虑将它拆分成更小的组件。

如果你的模型设计得恰当，UI（或者说组件结构）便会与数据模型一一对应，这是因为 UI 和数据模型都会倾向于遵守相同的信息结构。将 UI 分离为组件，其中每个组件需与数据模型的某部分匹配。

编写静态页面

编写一个应用的静态版本时，往往要编写大量代码，而不需要考虑太多交互细节；添加交互功能时则要考虑大量细节，而不需要编写太多代码。所以，将这两个过程分开进行更为合适。

在构建应用的静态版本时，我们需要创建一些会重用其他组件的组件，然后通过 props 传入所需的数据。props 是父组件向子组件传递数据的方式。
即使你已经熟悉了 state 的概念，也完全不应该使用 state 构建静态版本。state 代表了随时间会产生变化的数据，应当仅在实现交互时使用。所以构建应用的静态版本时，你不会用到它。

自上而下意味着首先编写层级较高的组件，自下而上意味着从最基本的组件开始编写。
当你的应用比较简单时，使用自上而下的方式更方便；
对于较为大型的项目来说，自下而上地构建，并同时为低层组件编写测试是更加简单的方式。

React 单向数据流（也叫单向绑定）的思想使得组件模块化，易于快速开发。

确定最少必需字段的state

只保留应用所需的可变 state 的最小集合（对象树包含尽可能少的字段，必需的才添加），其他数据均由它们计算产生。

逐个检查相应数据是否属于 state：

  1. 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
  2. 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
  3. 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

确定state合理存放的组件

确定哪个组件能够改变这些 state，或者说拥有这些 state。

策略：
对于应用中的每一个 state：

  • 找到根据这个 state 进行渲染的所有组件。
  • 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
  • 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
  • 如果你找不到一个合适的位置来存放该 state，就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。

添加反向数据流

处于较低层级的组件更新较高层级组件中的 state。
React 通过一种比传统的双向绑定(? 混淆了，双向绑定是什么形式的呢？)略微繁琐的方法来实现反向数据传递。

结语

比起写，代码更多地是给人看的。构建的模块化代码应易于阅读。当你开始构建更大的组件库时，你会意识到这种代码模块化和清晰度的重要性。并且随着代码重用程度的加深，你的代码行数也会显著地减少。