这是我参与「第四届青训营」笔记创作活动的第5天

响应式系统与React

1.React的历史与应用

应用场景
- 前端应用开发：Facebook、Instagram、Netflix网页版
- 移动原生应用开发：Instagram、Discord、Oculus
- 结合Electron，进行桌面应用开发
历史：
- 2010年，Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来React的设计
- 2011年，Jordan Walke创造了FaxJs，也就是React原型：
- 2013年，React正式开源。A JavaScript library for building user interfaces.
- 2014-今天：生态大爆发，各种围绕React的新工具/新框架开始涌现。

UI编程痛点：
- 1.状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 2.欠缺基本的代码层面的隔离和封装，代码层面没有组件化。
- UI之间的数据以来关系，需要手动维护，如何依赖链长，"Call Hell"。
响应式与转换式
- 转换式系统：给定输入-》求解输出。编译器、数值计算。
- 响应式系统：监听事件-》消息驱动。监控系统、UI界面。
  - 事件->执行既定的回调->状态变更->UI更新
- 响应式编程，解决UI编程痛点
组件化
- 组件是组件的组合或原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
- 组件设计
  - 1.组件声明了状态和UI的映射
  - 组件有Props/State两种状态
  - “组件”可由其他组件拼装而成
- 组件代码会是什么样子？
  - 自己有state
  - 可以接受父组件传props
  - 返回一个对象
状态归属问题
生命周期
思考：
- 1.React是单向数据流，还是双向数据流？
  
  单向数据流
- 2.如何解决状态不合理上升？
- 3.组件状态改变后，如何更新DOM？

（先挖坑，后面填）

problems：
- JSX不符合JS标准语法
- 返回的JSX发生改变时，如何更新DOM
- State/props更新时需要执行render函数
虚拟DOM

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
编程
- 指令式
- 声明式
- 响应式
How to Diff?
- 更新次数少与计算速度快之间如何trade off？
- 完美最小Diff法O(n^3)
- heuristic Alfo:O(n)

核心思想：将状态抽离到UI外部进行统一管理