这是我参与「第四届青训营 」笔记创作活动的第16天
React历史与应用
应用
-
前端应用开发，如
Facebook，Instagram，Netflix网页版。
-
移动原生应用开发，如
Instagram，Discord, Oculus。
-
结合Electron，进行桌面应用开发。
发展历程
-
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：A JavaScript library for building user interfaces.
-
2014年-今天
生态大爆发，各种围绕React的新工具/新框架开始涌现。
React的设计思路
UI编程的痛点
-
状态更新,UI不会自动更新,需要手动地调用DOM进行更新。
-
欠缺基本的代码层面的封装和隔离，代码层面没有组件。
-
UI之间的数据依赖关系,需要手动维护，如果依赖链路长,则会遇到“Callback Hell”。
响应式与转换式
转换式系统（给定「输入」求解「输出」）：
编译器、数值计算
响应式系统（监听事件，消息驱动）：
监控系统、UI界面
响应式系统
事件->执行既定的状态变更->回调
响应式编程
前端UI
事件-> 执行既定的回调-> 状态变更->UI更新
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
组件化
总结
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部（父组件借此方式控制子组件运转）
组件设计
- 组件声明了状态和UI的映射。
- 组件有Props/ State两种状态。
- “组件”可由其他组件拼装而成。
组件代码会是什么样子？
- 组件内部拥有私有状态State。
- 组件接受外部的Props状态提供复用性。
- 根据当前的State/Props,返回一个UI
状态归属问题
状态应该归属于两个节点（或多个）向上寻找到的最近共同祖先。
React是单向数据流。
生命周期
意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因。
组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。
只有类组件才有生命周期。
