一. React 简介和特性

简介

React 是一个 JavaScript 库，让你可以用组件和 JSX 来创建用户界面。React 可以与框架配合，支持服务端渲染，也可以用于开发真正的原生应用。(官方解释)

特点

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

React 哲学

React 是一个 JavaScript 库，让你可以用组件和 JSX 来创建用户界面。React 可以与框架配合，支持服务端渲染，也可以用于开发真正的原生应用。

以及谈到的关于 web 性能

等待资源加载时间和大部分情况下浏览器单线程执行是影响 web性能的两大主要原因。

对此 React 对多个性能提升方面有自己的 api 方法

等待资源加载

• 一次请求太多资源

React.lazy

• 网络请求慢

React.Suspense

• 资源加载失败

ErrorBoundary

浏览器线程执行

• JS 执行

异步更新

• 浏览器计算样式布局

时间切片

• UI绘制 React Fiber

更新流程

• Scheduler（调度器）

维护时间切片（类似requestIdleCallback） 与浏览器任务调度 优先级调度

• Reconciler（协调器）

将 JSX 转化为 Fiber、Fiber 树对比（双缓存） 确定本次更新的 Fiber

• 渲染器

用于管理一棵 React 树，使其根据底层平台进行不同的调用。

优点

• 快速响应：Fiber
• 组件化：复用性强
• 声明式编程
• 跨平台：只需修改渲染器

缺点

• 大型应用需要配套学习状态管理、路由工具
• 不适合小型应用，需要用 babel 处理

二. React 基础

web 应用结构

• 架构

打包配置：JSX -> babel -> JS

加载优化和错误降级

• UI （React Router 负责）

向应用中快速地添加视图和数据流，保持页面与URL间的同步。

• 路由

可复用UI -> 组件 -> 页面。可复用逻辑抽离成 hook

• 状态

多页面多组件共享信息 redux & context

web 应用组件

• 数据

通过定义 state 操作视图 Mount 时获取数据更新 stat e保存与视图无直接关系的值 unMount 前清空Ref

• UI

数据决定视图通过 Ref 获取到DOM

• 通信

props父子组件通信context & redux 组件信息共享

• 性能

函数使用 useCallback 值或者计算使用 useMemo 组件包裹 memo

三. 常用 Hook (图片引用课程内部，侵权联系删除)

引用以下图片