响应式系统与React ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第13天
1 React的历史与应用
01 应用：
前端应用开发，如Facebook, Instagram, Netflix网页版。
移动原生应用开发，如Instagram, Discord, Oculus。
结合Electron，进行桌面应用开发。
02 历史：
2010年Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年Jordan Walke创造了FaxJS,也就是后来的React原型。
2012年在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验创造了后来的React。
2013年React正式开源，在2013 JSConf上Jordan Walke介绍了React这款全新的框架。
2014年-今天，生态大爆发，各种围绕React的新工具/新框架开始涌现。
2 React的设计思路
React的设计思路-UI编程痛点
1）状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
2）欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
3）UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
React的设计思路-响应式与转换式
响应式系统：事件-> 执行既定的回调 -> 状态变更
前端UI：事件-> 执行既定的回调 -> 状态变更-> UI更新
React的设计思路-响应式编程
1）状态更新，UI自动更新。
解决：“状态更新，UI不会自动更新，需要手动地调用DOM进行更新。”
2）前端代码组件化，可复用，可封装。
解决：“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
3）状态之间的互相依赖关系，只需声明即可。
解决：“UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
React的设计与实现-组件化
总结：
a. 组件是组件的组合/原子组件
b. 组件内拥有状态，外部不可见
c. 父组件可将状态传入组件内部
React的设计思路-状态归属问题： 状态归属于两个节点向上寻找到最近的祖宗节点
-React是单向数据流。
组件设计：
1）组件声明了状态和UI的映射。
2）组件有Props/State两种状态。
3）“组件”可由其他组件拼装而成。
3 React（hooks）的写法
hooks 作为React 新增特性，可以让我们在不编写 class 的情况下使用 state 以及其他的 React 特性。
useState主要用来改变一个state状态值。
在React开发中，我们常在生命周期函数中进行一些操作。但是在函数组件中是没有生命周期函数的，因此官方提供了useEffect()副作用钩子。
React中的副作用操作:
发ajax请求数据获取
设置订阅/启动定时器
手动更改真实DOM
4 React的实现
React的实现-Problems：
1） JSX不符合JS标准语法
2）返回的JSX发生改变时，如何更新DOM
3）State/Props更新时，要重新触发render函数
Virtual DOM(虚拟DOM)：
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
它赋予了React声明式的API:您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
React的实现-How to Diff?： 完美的最小Diff算法，需要O(n^3)的复杂度。
牺牲理论最小Diff, 换取时间，得到了O(n)复杂度的算法：Heuristic O(n) Algorithm 启发式
5 React状态管理库
React状态管理库-核心思想：将状态抽离到U!外部进行统一管理
React状态管理库-推荐：
React状态管理库-状态机： 当前状态，收到外部事件，迁移到下一个状态
React状态管理工具：
6 应用级框架科普
个人总结与体会：
通过本节课程，我学习了有关于响应式与React的知识，老师从React的历史与应用讲起，使我了解了React的发展历程，然后讲述了React的设计思路，React（hooks）的写法，React的实现，React状态管理库，以及最后对应用级框架进行了科普，我学习到了很多有用的知识，并且对于React又有了更深的认识和理解，获益匪浅！
