React基础与实践
React特性与简介
-
特点
- 声明式
- 组件化
- 跨平台编写
-
优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
-
缺点
- 大型应用需要配套学习
- 不适合小型应用
React基础
-
组件
-
Class组件
- 继承 + 构造函数
- this
- 生命周期
- render方法
-
函数式组件
- 没有生命周期
- 借助Hook
- return JSX
-
函数式相较于Class的优点
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用方便
-
-
Hook规则&原理
-
只能在最顶层使用Hook
-
只能在React函数中调用Hook
- 在React函数组件中或自定义Hook中调用
- 自定义Hook必须以use开头
- Hook中的state是完全隔离的
-
React状态管理
状态管理
-
状态管理工具的本质：管理共享内存中的状态
- 共享内存
- 管理状态
- 页面通信
- 组件通信
-
详细定义：单页应用的各个组件本身是共享内存的，如果将状态保存在内存中，就可以读写统一内存中的变量，从而达到状态共享的目的。
React状态管理
-
工具分类
- React自带：Local State(props)和Context
- 单向数据流：Flux、Redux(Redux-toolkit)
- 双向数据绑定：Mobx
- 原子型状态管理：Recoil、Jotai
- 异步操作密集型：Rxjs
React路由与项目实践
路由
-
路由是一种负责寻径的网络设备，它在互联网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。
-
路由用于连接多个逻辑上分开的网络，对用户提供最佳的通信路径
-
路由的演变
- 静态网站
- 动态网站
- 前后端分离
- 单页应用
组件库的使用和自定义组件
组件库介绍
-
组件
- 软件组件：封装好的可复用的程序“零部件”
- 前端UI组件
-
组件库：一系列UI组件的合集
- 一致性
- 效率
- 协同
搭建业务组件库
-
架构设计
- 单包架构：一个代码仓库里所有组件打包成一个整体，发布出去一个npm包
- 多包架构：一个代码仓库包含多个组件代码，会发布出去多个npm包
