React 的基础与实践 (部分) | 青训营

76 阅读1分钟

React

一、React的特性:

用于构建用户界面的JavaScript库

二、React的特点:

声明式、组件化、跨平台编写

屏幕截图 2023-08-25 195424.png

三、React哲学:

React使用JavaScript构建快速响应的大型Web应用程序的首选之一。它在Facebook和Instagram上表现优秀。
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。

(第一张图显示为影响等待资源加载的原因, 第二张图显示为影响浏览器线程执行的原因)

屏幕截图 2023-08-25 200241.png

屏幕截图 2023-08-25 200254.png

1.React哲学_Lazy&Suspense

下图中,左边部分是实现的具体代码,右边部分是呈现的界面。

屏幕截图 2023-08-25 200743.png

2.React哲学_ErrorBoundary

下图中,左边部分是实现的具体代码,右边部分是呈现的界面。

屏幕截图 2023-08-25 201535.png

3.React哲学_更新流程

屏幕截图 2023-08-25 202918.png

Schedule(调度器)
  • 维护时间切片
  • 与浏览器任务调度
  • 优先级调度
Reconciler(协调器)
  • 将JSX转化为Fiber
  • Fiber树对比(双缓存)
  • 确定本次更新的Fiber
Renderer(渲染器)

渲染器用于管理一颗React树,使其根据底层平台进行不同的调用。

屏幕截图 2023-08-25 205001.png

总结:
优点:1.快速响应:Fiber 2.组件化:复用性强 3.声明式编程 4.跨平台:只需修改渲染器
缺点:1.大型应用需要配套学习状态管理、路由器 2.不适合小型应用,需要用Babel处理

用React开发web应用

架构——打包配置:JSX->babel->JS加载优化和错误降级
路由——React Router向应用中快速地添加视图和数据流,保持页面与URL间的同步
UI ——可复用UI->组件->页面。可复用逻辑轴离成hook
状态——多页面多组件共享信息redux&context

屏幕截图 2023-08-25 205645.png