响应式系统与React(2)|青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第11天
一、课程知识要点：
React的实现React状态管理库- 应用级框架科普
二、详细知识点介绍：
React的实现
problems
- JSX 不符合JS标准语法
- 返回的JSX发生改变时，如何更新
DOM - State/Props更新时，要重新触发
render函数
problems1
const Test = (props) => {
const { url } = props;
return (<div className="root"><img src={url}/> </ div>)
}
"use strict";
const Test = props => {
const {
url
}= props;
return/*#__PURE__*/React.createElement("div"，{
className: "root"
}，/*#__PURE__*/React.createElement( "img" , {src: url
}));
};
problems2
Virtual DOM（虚拟DOM)Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一—对应的关系。- 它赋予了
React声明式的API:您告诉React希望让U是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
How to Diff?
- 完美的最小
Diff算法，需要o(n^3)的复杂度。 - 牺牲理论最小
Diff，换取时间，得到了O (n)复杂度的算法:Heuristic O(n) Algorithm
React状态管理库
核心思想
将状态抽离到UI外部进行统一管理
推荐
状态机
当前状态，收到外部事件，迁移到下一个状态
应用级框架科普
- 硅谷明星创业公司Vercel 的 React开发框架，稳定，开发体验好，支持
Unbundled Dev,swC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster" - 字节跳动Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践,可以减少很多调研选择工具的时间。
- 无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑,适合前后端紧密结合的小团队项目。
三、课后总结
详细讲述了三个方面的响应式系统与React，值得我们认真去学习。
