React 的设计思路 | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的第4天。在响应式系统与react这门课程中老师为我们介绍了React的设计思路。
在使用JavaScript来进行UI编程时，程序员们往往会遇到以下的问题。
- 状态更新时，UI不会自动更新，需要手动调用DOM进行更新。
- 没有基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
于是，React就从以下几点着手，来解决这些痛点。
响应式编程
响应式系统的一般流程为：监听事件→执行既定的回调→状态变更。在react对于前端UI的设计中，在状态变更后，还有UI自动更新的特点。这样的特性使得程序员不再需要手动更新DOM，避免了很多的麻烦。react能够实现这样方便的功能是得益于基于Diff算法的虚拟DOM。
组件化
React还有一大特点就是代码的组件化，把页面内容划分为一个个组件的组合，使得代码可复用，可封装。
如上图所示的手机购买页面，就被划分为了如下的组件
在react中组件有以下特点：
- 组件是原子组件或者组件的组合
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
在上面的例子中，有一个当前价格的属性，它是属于顶栏、型号还是颜色组件的呢？根据上文中提到的组件状态外部不可见，父组件可将状态传入组件内部，我们得知，要找到状态归属，得找到属性相关组件的最近的祖宗节点。所以[当前价格]属于Root节点。
由上面的例子，我们确定了react是单向数据流。
组件代码
- 组件内部会有私有状态State
- 组件接受外部的Props状态提供复用性
- 根据当前的State/Props，返回UI
React生命周期
react的生命周期可以分为三个状态
- 挂载：插入真实DOM
- 更新：重新渲染
- 卸载：移除真实DOM
总结
对于前端设计而言，响应式的编程提供了十分方便的设计思路，程序员们只需要着手于状态的更新而不需要考虑麻烦的DOM操纵。组件化的编程也使得代码更具封装性，这也是为什么如今类似于React以及Vue这样的前端框架如此火热的原因。
