响应式系统React | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第8天
React的历史与应用
应用
- 前端应用开发，如Facebook，Ins，Netfli网页版
- 移动原生应用开发，Instagram，Discord，Oculus
- 结合Electron，进行桌面应用开发
历史
- 2010年，Facebook在其php生态中，引入xhp框架，首次引入了组合式组件的思想。启发了后来的React的设计
- 2011年，Jordan Walke创造了FaxJs，也就是后来的React原型
- 2012年，在FaceBook收购Instagram后，该FaxJs项目在内部得到使用，Jordan Walke基于FaxJs的经验创造了React
- 2013年，React正式开源，在2013JSConf上Jordan Walke介绍了这款全新的框架
- 2014年至今，React生态大爆发，各种围绕React的新工具/框架开始涌
React设计思路
从零开始构建React（正好我本来就不会）
UI编程痛点
当选购物品时总价随着选择的商品、选择的数量变化，需要一个声明一个和计算值，每当任何一个相关事件触发都需要更换新计算值，并且操控DOM同步更新UI，光是大量的添加监听器就意味着大量的代码，同时也意味着它是混乱的
- 当状态更新时，UI不会自动更新，与要手动调用DOM进行更新
- 欠缺基本的代码层表面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护，如依赖链路长，就会遇到“Callback Hell”
转换式系统与响应式系统
-
转换式系统（编译器，数值计算）
- 给定输入求解输出
-
响应式系统（监控系统，UI界面）
- 监听事件，消息驱动
- 事件->执行既定的回调->状态变更(->UI更新)
响应式编程
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可持续
- 状态之间的互相依赖，只需声明即可
组件
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态(如商品总价)传入组件内部
状态归属
- 组件共享的状态总是属于多个组件最近的公共父组件
- 子组件通过触发事件（如OnClick()）向父组件传递由父组件改变状态，父组件通过触发状态改变事件（如OnChangeValue()）向子组件传递状态变化
思考
- React是单向数据流还是双向数据流？——>单向
- 如何解决状态不合理上升问题
- 组件状态改变后，如何更新DOM
组件设计
- 组件声明了状态和UI映射
- 组件有Props（从外部接受）/State（内部私有），两种状态，根据状态返回UI
- 组件可由其他组件拼装而成
抽象化
function Component(props){
//设定状态
const {url}=props;
this.text='点击'
//返回UI
return({
<div>
<SubComponent props={{color : 'red'}}></SubComponent>
<img src={URL}></img>
<button>{text}</button>
</div>
})
}
生命周期
React（hooks）的写法
React的实现
1.JSX不符合JS标——>编译
2.返回的JSX发生改变时，如何更新Dom——>Virtual Dom
虚拟Dom
Virtual Dom是一种用于和实现DOM同步，而在JS内存中维护一个对象。特具有和DOM类似的树状结构，并和DOM可以建立意义对应关系
它赋予了React声明式的API：您告诉React希望让UI是什么样的状态。React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在郭建应有程序时必要的操作中解放出来
3.State/Props更新时，要重新触发render函数——>Diff
React状态管理库
核心思想：将状态抽离到UI外部进行统一管理
- redux
- xstate
- mobx
- recoil
状态机
当前状态，收到外部事件，迁移到下一个状态
应用级框架科普
- Next.js
- Modern.js
- Blitz.js
总结
学了一年的前端框架学的一直都是Vue，还是第一次真正接触React框架，本节课还只是React的入门知识，但也让我对React有了全新的认识
