第⑨节课学习笔记| 青训营

62 阅读2分钟

react

1. React的历史与应用

QQ截图20230814193406.png

2010
Facebook 开源了PHP 语言 的一种扩展叫—— XHP,可以在 PHP 中创建 Composite Components。你去看 XHP 就会发现语法和 JSX 很像。事实上,之后,他们也将这种新语法引入到了 React 中。
2011
Jordan Walke 创建了 FaxJS ,它就是 React.js 早期的原型。
2012
Facebook 想要一个比较好的解决方案来处理他们广告比较难以管理的问题,于是 Jordan Walke 就开始了 React 的原型创建工作
2014
年初,#reactjsworldtour 大会开始,目的是构建 React 的社区,React Hot Loader 发布。
2015
年初,Flipboard 发布了 React Canvas,React Native for Android 发布
2017
Airbnb 介绍了他们的开源库 React Sketch.app
2018
React v16.3.0 发布

2. React的设计思路

UI 编程痛点

01.状态更新,UI不会自动更新, 需要手动地调用DOM进行更新。
02.欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
03.UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”。

QQ截图20230814193827.png

响应式系统

graph TD
事件 --> 执行既定的回调  --> 状态变更 

前端UI

graph TD
事件 --> 执行既定的回调  --> 状态变更  --> UI更新

响应式编程

01.更新,UI自动更新。
“状态更新,UI不会自动更新,需要手动地调用DOM进行更新。”
02.前端代码组件化,可复用,可封装
“欠缺基本的代码层面的封装和隔离,代码层面没有组件化。”
03.状态之间的互相依赖关系,只需声明即可。
“UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”。”

组件化

QQ截图20230814194514.png

1.组件是组件的组合/原子组件。
2.组件内拥有状态,外部不可见。
3.父组件可将状态传入组件内部。

3. React (hooks)的写法

Virtual DOM (虚拟DOM) Virtual DOM是- -种用于和真实DOM同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一-对应的关系。
它赋予了React 声明式的API :您告诉React希望让UI是什么状态, React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

4. React的实现

graph TD
不同类型的元素 --> 替换
graph TD
同类型的DOM元素 --> 更新
graph TD
同类型的组件元素 --> 递归

5. React状态管理库

QQ截图20230814195012.png

QQ截图20230814195036.png

6. 应用级框架科普

QQ截图20230814195104.png