这是我参与「第五届青训营」伴学笔记创作活动的第 5 天
React历史与应用
- 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的设计思路
UI编程痛点
- 01 状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新
- 02 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- 03 UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 “Callback Hell”
响应式与转换式
- 转换式系统：给定[输入]求解[输出] （编译器、数值计算）
- 响应式系统：监听事件，消息驱动 （监控系统、UI界面）
- 事件——>执行既定的回调——>状态更新——>UI更新
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
组件化
- 组件是 组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
- 状态归属于两个节点向上寻找到最近的祖宗节点
- 思考
- React是单向数据流，还是双向数据流？ 答：单向数据流
- 如何解决状态不合理上升的问题？ （第五节）
- 组件的状态改变后，如何更新DOM？（第四节）
- 组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- “组件”可由其它组件拼装而成
- 响应式编程
生命周期
Mounting
Updating
Unmounting
React（hooks）的写法
React的实现
- 01 JSX 不符合 JS 标准语法 --> 转译
- 02 返回的 JSX 发生改变时，如何更新DOM
- State/Props更新时，要重新出发render函数
how to Diff
完美的最小Diff算法，需要O(n^3) 的复杂度。
牺牲理论最小Diff，换取时间，得到了 O(n)复杂度的算法：Heuristic O(n) Algorithm
React状态管理库-核心思想
- 将状态抽离到UI外部进行统一管理
- 推荐：redux、xstate、mobx、recoil
应用级框架科普
- NEXT.JS
- MODERN.JS
- Blitz
总结
一直在学vue还没有开始学react，这是第一次接触react，还是得补补课~
