1 . React 的历史和应用
应用：
发展历史：
围绕React的新工具/新框架
2 . React 的设计思路
用原生 JS 写前端的缺陷（问题）：
两种系统的不同之处：
响应式系统的工作原理：
对React的期望：
案例：实现下图页面效果：
组件划分：
注意： DOM 树不是JavaScript的一个变量 ，DOM是浏览器内部的东西 ，只是我们可以用 JS 通过DOM内置的一些API来操作DOM。（即上图的划分并不是一颗DOM树）
思考：
- React 是单向数据流 ，还是双向数据流？
是单向数据流
- 如何解决状态不合理上升的问题？
使用状态管理库
- 组件的状态改变后，如何更新DOM？
状态更新时，开始 diffing （递归的过程，只要父组件的状态发生改变，那么其子组件，以及子组件的子组件的render都会执行一遍，不是更新），生成一个 Virtual Dom ，然后和原来的 Virtual Dom 进行 diffing 。
组件设计想法：
React Hooks
- 注意不要在循环，条件（if）或者嵌套函数里面调用hooks
4 . React的实现
4 . 1 JSX 不符合 JS 的语法
进行转译
4 . 2 返回的 JSX 发生改变时，如何更新 DOM
补 ，指令式编程、声明式编程、响应式编程
- 指令式编程就是要一步一步告诉计算机要怎么做。（如 C语言）
- 声明式编程就是只下达指令，不用做底层的东西
- 响应式编程是声明式编程的一个类别，它还可以自己响应自己，比如接收到某些信号后进行自身状态的一些改变。
- 状态更新时，开始 diffing （递归的过程，只要父组件的状态发生改变，那么其子组件，以及子组件的子组件的render都会执行一遍，不是更新），生成一个 Virtual Dom ，然后和原来的 Virtual Dom 进行 diffing 。
How to diff ？
最优算法：
实现思想：
5 . React 状态管理库
组件依赖于外部的状态管理库，一般只用于业务开发，一般的组件库是不依赖于外部的状态管理库。
常见状态管理库：
状态机：
拥有当前状态，且收到外部事件，迁移到下一个状态。
例：红绿灯
