这是我参与「第五届青训营」伴学笔记创作活动的第6天。今天开始了有关React方面的学习。
历史与应用
- 历史
- 2010年，组合式组件思想的引入启发了后来的React设计
- 2011年，React的原型FaxJS被创造出
- 2012年，基于FaxJS，React被创造出
- 2013年，React正式开源
- 2014年至今，围绕React的新工具、框架涌现
- 应用
- 前端应用开发
- 移动原生应用开发
- 结合ELECTRON进行桌面开发
设计思路（推演）
原先的JS有着需手动调用来更新DOM、代码层面没有组件化、UI之间的关系需手动维护等缺点，继而使React具有用于解决以上问题的特性。
- 响应式编程
响应式可以监听事件，消息驱动，而转换式是根据输入求解输出。 - 组件化
组件有自己的状态，外部不可见，父组件可以将状态传入组件内部。 - 状态归属
状态归属于两个节点向上寻找到最近的祖宗节点。可用onChangeValue()解决不合理上升问题，同时要注意React是单向数据流。
HOOKS写法
注意：不能在循环、条件或嵌套函数中调用HOOK
实现
问题
- JSX不符合JS标准语法
- 返回的JSX发生改变时，如何更新DOM
- State/Props更新时，要重新触发render函数
Virtual DOM：用于和真实DOM同步，而在JS内存中维护的一个对象，具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
Diff
可通过牺牲理论最小Diff提升速度
- 不同类型的元素：替换
- 同类型的DOM元素：更新
- 同类型的组件元素：递归
状态管理库
核心思想
将状态抽离到UI外部进行统一管理
推荐的状态管理库
redux、xstate、mobx、recoil
状态机
当前状态，受到外部事件，迁移到下一个状态，类似于红绿灯
应用级框架科普
- NEXT.JS 有Serverless一键部署平台帮助部署
- MODERN.JS 减少调研选择工具的时间
- Blitz 适合前后端紧密联合的小项目
