这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
React作为前端最常用的框架，本篇主要介绍与入门react！
React的历史与应用
React应用
-
前端应用开发，如Facebook，Instagram, Netfix网页版
-
移动原生应用开发，如Instagram, Discord.
-
结合Electron进行桌面应用开发。(Electron结合了Chrome和node环境，既能实现前端，也能像本地应用去获取本地文件资源，网络等)
-
React three fiber，实现3D图形的库。可基于webGL写游戏。
React历史
而FaxJS即是React原型，而四个特性也是React的特性。
- 客户端以及服务端渲染。
- 响应式。当状态变更时，UI也会更新。(以往状态发生变化时，需要手动JS去改变。)
- 性能。
- 结构性的。1. 给前端代码做了组件复用封装 2. 函数式声明 3.HTML片段view直接在JS中声明，不需要调用DOM接口构建出来。
2013年 React正式开源，JSConf上Jordan Walke介绍了这款全新的框架。
- React: A JavaScriipt library for building user interfaces.
2014- 至今 生态大爆发，各种围绕React的新工具/新框架开始涌现
React的设计思路
重点分析：
- UI编程痛点
- 响应式与转换式
- React设计与实现 - 组件化
- React设计与实现 - 状态归属问题
- React设计与实现 - 生命周期
UI编程痛点
引子
想实现，点击不同手机配置以及颜色来显示当前的价格。每当用户点击不同卡片，更新当前价格。
若用原生JS，也可实现：
- 通过给iPhone13 Pro设置点击事件，然后写个callback，底下卡片也放。
- 每当callback被触发时，都会更新CurrentValue当前价格。
- 但是，只能设置currentValue，要更新UI还得通过DOM接口来修改。
缺点：挂载很多个onclick事件，而且如果有很多传导部分，比如很多位置的价格需要改变显示，比如上面显示一个价格，左下角还显示一个价格，callback需要绑定很多个。这是十分的过程式编程的，若场景复杂，会特别的混乱。
总结
UI编程的三个主要痛点：
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。比如callback里嵌套了另外的callback，而该callback又嵌套了另外的callback，层次太深了。
响应式与转换式
转换式不等于响应式
转换式系统：
- 给定[输入] 求解 [输出]的过程
- 编译器、数值计算
响应式系统：
- 监听事件，消息驱动。通过监听事件，来改变消息的驱动。
- 监控系统 UI界面。事件发生时，响应消息，改变UI界面。
前端页面往往不需要数值计算，而是指定的数据来显示。
