这是我参与第五届青训营伴学笔记创造活动的第五天!
01、React的历史与应用
历史:
应用:
- 前端应用开发,移动原生应用开发,组合Electron进行桌面应用开发
02、React的设计思路
UI编程的痛点:
- 状态更新,UI不会自动更新,需要手动的调用,DOM进行更新
- 欠缺基本的代码层面的封装和隔离,代码层面没有组件化
- UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”
响应式与转换式:
响应式编程:
- 状态更新,UI自动更新
- 前端代码组件化,可复用,可封装
- 状态之间的相互依赖关系只需声明即可
组件化与状态归属问题:
当前价格属于Root节点!
状态归属于两个节点向上寻找到最近的祖宗节点
- 组件是组件的组合/原子组件
- 组件内拥有状态,外部不可见
- 父组件可将状态传入组件内部
组件设计:
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- “组件”可以由其他组件拼装而成
03、React(hooks)的写法
04、React的实现
Problems:
- JSX不符合JS标准语法
- 返回的JSX发生改变时,如何更新DOM
- State/Props更新时,要重新触发render函数
Diff:
05、React状态管理库
核心思想:
会降低组件的复用性
状态机: