响应式系统与React|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第10天
前言
随着前端技术的不断发展，为了高效开发前端衍生出了框架的概念，目前主流的框架就有React，Vue，Agular等。其中React的响应式开发（通过改变状态自动响应UI变化）很方便，既能开发各种Web，也能开发移动原生应用，还能结合Electron进行桌面应用开发，功能之强大，很有必要对其进行了解与应用。
React的设计思路--响应式编程
UI编程的痛点
- 状态更新，Ui不会自动更新，需要手动地调用DOM进行更新
- 欠缺基本地代码层面地封装和隔离，代码层面没有组件化
- UI之间地数据依赖关系，需要手动维护，如果依赖链路长，则会遇到'Callback Hell'(回调地狱)
响应式编程
- 状态更新，UI自定更新（响应式）
- 前端代码组件化，可复用，可封装（组件化）
- 状态之间的相互依赖关系，只需声明即可
响应式系统：
响应式编程：
响应式系统与转换式系统
- 转化式系统：给定【输入】求解【输出】 （编译器 数值计算）
- 响应式系统：监听事件，消息驱动 （监控系统 UI界面）
React的设计思路--组件化
- 组件是 组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- "组件"可由其他组件拼装而成
- 组件内部拥有私有状态State
- 组件接受外部的PRops状态提供复用性
- 根据当前的State/Props，返回一个UI
React的设计思路--状态归属问题
- React是单向数据流（状态只能从父组件传到子组件）
- 为了解决状态不合理上升问题可以用Redux等状态库
- 组件状态改变后，组件之间会做一个状态的递归，然后通过diff算法比较差异通过虚拟DOM更改DOM
React的设计思路--声明周期
React(hooks)的写法
引入useState函数标定了count的初始状态同时返回了count和setCount（改变状态），然后Example返回值就是一个组件，组件内部通过点击一下按钮count的值就加一，count的数据改变然后导致DOM改变，导致页面也发生变化。
引入useEffect函数，这是一个副作用（改变外部系统），只会在组件挂载的时候执行一次，代码中利用useEffect改变document.title的内容（只在组件挂载的时候执行了一次，后续count改变不会被导致改变）。
虚拟DOM
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可建立一一对应的关系（摘抄自青训营课件）
这种方式赋予了 React 声明式的 API：您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。（摘抄自React官网）
React的实现（diff算法）
| 分类 | 方法 |
|---|---|
| 不同类型的元素 | 替换 |
| 同类型的DOM元素 | 更新 |
| 同类型的组件元素 | 递归 |
React状态库的核心思想
将状态抽离到UI外部进行统一管理
总结
本文章重点介绍了React的设计思路，响应式系统，怎么做到响应式，为什么要创造React，以及React的组件化，状态管理等问题，比较偏于入门理解React。React基础的语法，与编写的规范需要自己查看官网和阅读相关书籍去学习，做到开发上能真正熟练应用React。
