React 应用
- 前端应用开发，如 Facebook, Instagram,Netflix 网页版。
- 移动原生应用开发，如 Instagram，Discord，Oculus.
- 结合 Electron，进行桌面应用开发。 React 历史
- 2010 年 Facebook 在其 php 生态中，引入了 xhp框架，首次引入了组合式组件的思想，启发了后来的 React的设计。
- 2011年，Jordan Walke 创造了 FaxJS，也就是后来的 React 原型:
- 2012 年 在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxS 的经验，创造了 React。
- 2013年 React 正式开源，在2013 JSConf上Jordan Walke 介绍了这款全新的框架:ReactA JavaScript library for building user interfaces.
- 2014年～今天：生态大爆发，各种围绕React的新工具/新框架开始涌现
React 的设计思路 - Ul 编程痛点
-
状态更新，Ul 不会自动更新，需要手动地调用 DOM进行更新
-
欠缺基本的代码层面的封装和隔离，代码层面没有组件化
-
Ul 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
React 的设计思路 - 响应式与转换式
（编译器 ，数值计算 ，给定「输入」求解「输出」）转换式系统 ≠ 响应式系统 （监控系统，Ul 界面，监听事件，消息驱动。）
响应式编程
01 状态更新，UI 自动更新。
02.前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。 “Ul 之间的数据依赖关系”
响应式系统 事件-- 执行既定的回调-- 状态变更
React 的设计与实现 - 组件化 总结
1.组件是组件的组合/原子组件
2.组件内拥有状态，外部不可见
3.父组件可将状态传入组件内部
React与 VUE的异同 相同点：
1） 使用虚拟DOM
2） 提供响应式和组件化的视图组件
3） 将注意力保持在核心库，而将其他功能如路由等交给相关的库
不同点：
1） VUE是响应式的数据双向绑定系统，而React是单向数据流，没有双向绑定；
2） VUE语法简单，适用于小型项目创建；而React侧重于大型项目；
3） 视图更新：在React中，当某个组件的状态发生变化的时候，会以该组件为根，重新渲染整个组件树（需要手动调用方法减少子组件的更新）；在VUE中，组件的依赖是在渲染过程中自动追踪的，所以能精准知晓哪个组件需要被重新渲染；
状态归属问题
•状态归属于两个节点向上寻找到最近的祖宗节点
•React是单向数据流
React 的设计思路 - 组件化 组件设计
1.组件声明了状态和 UI 的映射。
2.组件有 Props/State 两种状态。
3.“组件”可由其他组件拼装而成。
React 的设计思路 - 组件化
1.组件内部拥有私有状态 State。
2.组件接受外部的 Props 状态提供复用性。
3.根据当前的 State/Props，返回一个 Ul。
React 的实现 - Problems
1.JSX 不符合 JS 标准的语法
2.返回的 JSX 发生改变时，如何更新 DOM
3.State/Props 更新时，重新触发 render 函数
React 的实现 - Problem2
- Virtual DOM (虚拟 DOM)
- Virtual DOM 是一种用于和真实 DOM 同步，而在 JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和 DOM 可以建立一一对应的关系。
- 它赋予了 React 声明式的 API:您告诉 React 希望让 Ul 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。
编程分类
- 指定式编程：一步一步告诉系统要怎么做
- 声明式编程：发出命令
- 响应式编程：某个状态改变自动调整其他状态，自己改变自己
React 的实现 - How to Diff?
- 完美的最小 Diff 算法，需要 O(n^3) 的复杂度。
- 牺牲理论最小 Diff，换取时间，得到了 O(n)复杂度的算法:Heuristic O(n)Algorithm
- 不同类型的元素-替换
- 同类型的DOM元素-更新
- 同类型的组件元素-递归
•React 状态管理库 - 核心思想：将状态抽离到 UI 外部进行统一管理
概念：•状态机：当前状态，收到外部事件，迁移到下一个状态
React 中 key的作用？
key是虚拟DOM对象的标识。 当state中的数据发生变化时，react会根据新数据生成新的虚拟DOM，随后React进行新虚拟DOM与旧虚拟DOM的diff比较，比较规则如下： a. 旧虚拟DOM中找到了与新虚拟DOM相同的key： (1). 若虚拟DOM中内容没变，直接使用之前的真实DOM； (2). 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉之前的真实DOM； b. 旧虚拟DOM中未找到与新虚拟DOM相同的key，则根据数据创建的新的真实DOM，随后渲染到页面。
以下是react该如何学习的建议
对于初学者而言，有以下建议
1.深入掌握ES6，js基础
2.先学会用react写简单的页面（怎么使用）
3.了解babel，理解jsx转化为界面的过程
4.掌握react生命周期，状态修改，性能优化等api
5.掌握react高阶组件，相关库，比react-redux等
有一定基础，想进一步进阶的可以采用以下方法
1.学习数据结构，掌握react架构模式和diff算法
2.和vue等其他框架横向对比，总结
3.掌握babel, webpack，配套实现react自定义脚手架
4.学习node.js，掌握ssr
