版本修订记录
1.
前言
2.
使用 Create React App 创建 React 应用
❱
2.1.
使用 react-app-rewired 修改配置
2.2.
使用 customize-cra 进行辅助配置
2.3.
使用 CRACO 进行辅助配置
3.
使用 Vite 创建 React 应用
❱
3.1.
常用命令
3.2.
自动导入内容的配置
3.3.
配置
❱
3.3.1.
共享配置
3.3.2.
开发服务器配置
3.3.3.
构建配置
3.4.
React 构建插件
3.5.
构建配置示例
4.
最简单的 React 示例
5.
关于 JSX
6.
关于 ECMAScript 6 中的 Class
❱
6.1.
类中的 this
7.
使用 Typescript 编写应用
❱
7.1.
类型系统
7.2.
接口
7.3.
配置与编译
7.4.
声明文件
8.
组件
❱
8.1.
函数组件代码的组织
8.2.
定义 props
8.3.
什么是 Hook
8.4.
定义 State
8.5.
Effect
8.6.
条件渲染
8.7.
重新渲染
8.8.
稳定引用
8.9.
创建和使用 Context
8.10.
Memoized 值的定义和使用
8.11.
事件处理
8.12.
受控组件与非受控组件
8.13.
Fragment
8.14.
Portal
8.15.
自定义 Hook
8.16.
Ref 的妙用
8.17.
组件间通讯
8.18.
惰性加载
8.19.
Render Props
8.20.
异步操作
8.21.
增强的表单操作
8.22.
严格模式
8.23.
高阶组件
8.24.
小心闭包陷阱
8.25.
常用 Hook
❱
8.25.1.
useReducer
8.25.2.
useDebugValue
8.25.3.
useDeferredValue
8.25.4.
useSyncExternalStore
8.25.5.
useOptimistic
8.26.
React 中使用的类型
9.
服务端渲染
❱
9.1.
项目组织形式
9.2.
项目构建
9.3.
服务端标记
10.
使用 PropTypes 进行类型检查 ⚠️
❱
10.1.
验证器
10.2.
默认值
11.
Flow
❱
11.1.
启用 Flow
11.2.
类型标记
11.3.
类型别名
11.4.
在 React 中的应用
12.
样式
❱
12.1.
使用 Sass
12.2.
使用 Less
12.3.
拼合样式类名
13.
Styled Components
❱
13.1.
基本使用方法
13.2.
样式扩展
13.3.
修改 props
13.4.
动画定义
13.5.
主题支持
13.6.
stylis 增强的 CSS 语法
14.
Emotion
❱
14.1.
不同使用方法的优势
14.2.
JSX 编译标注
14.3.
使用对象定义的样式
14.4.
定义关键帧动画
14.5.
使用主题
14.6.
样式类名后缀
14.7.
嵌套选择器
14.8.
媒体查询
14.9.
全局样式
14.10.
组合使用 Tailwind CSS 框架
15.
React Router v5
❱
15.1.
React Router DOM
❱
15.1.1.
Router
15.1.2.
Route
15.1.3.
Switch
15.1.4.
Redirect
15.1.5.
Link
15.1.6.
NavLink
15.2.
History
15.3.
withRouter
15.4.
使用 Hook 代替 withRouter
15.5.
路由守卫
15.6.
HTTP 服务对 SPA 导航的处理
15.7.
在 Typescript 中的类型定义
16.
React Router v6
❱
16.1.
安装与最小应用
16.2.
常用组件
❱
16.2.1.
BrowserRouter
16.2.2.
HashRouter
16.2.3.
MemoryRouter
16.2.4.
RouterProvider
16.2.5.
Routes 和 Route
16.2.6.
Outlet
16.2.7.
Link
16.2.8.
NavLink
16.2.9.
Navigate
16.2.10.
Form
16.2.11.
Await
16.3.
可用的 Hook
❱
16.3.1.
useHref
16.3.2.
useLinkClickHandler
16.3.3.
useInRouterContext
16.3.4.
useLocation
16.3.5.
useNavigationType
16.3.6.
useMatch
16.3.7.
useNavigate
16.3.8.
useNavigation
16.3.9.
useParams
16.3.10.
useResolvedPath
16.3.11.
useRoutes
16.3.12.
useSearchParams
16.3.13.
useFetcher
16.3.14.
useRouteLoaderData
16.3.15.
useRevalidator
16.3.16.
useRouteError
16.4.
模拟路由守卫功能
17.
Flux
❱
17.1.
核心概念
17.2.
Action
17.3.
Dispatcher
17.4.
Store
17.5.
Container
17.6.
使用 Hook 简化 Flux
18.
Redux
❱
18.1.
与 Flux 有何不同
18.2.
Action
18.3.
Reducer
18.4.
Store
18.5.
与 React 整合
18.6.
与 React-Router 整合
18.7.
异步数据流
18.8.
Redux-Saga
❱
18.8.1.
Effects
18.8.2.
Channels
18.8.3.
自定义 Buffer
18.8.4.
常用辅助函数
18.8.5.
使用在 Typescript 中的类型定义
18.8.6.
一些需要注意的关键点
19.
Redux Tookit 与 Hooks
❱
19.1.
Toolkit 提供的新 API
19.2.
构建 Store
19.3.
快速创建 Action
19.4.
创建 Reducer
19.5.
定义 State 片段
❱
19.5.1.
在 State 片段中使用异步函数
19.6.
在组件中利用 Hook 控制 Store
❱
19.6.1.
useSelector
19.6.2.
useDispatch
19.7.
使用独立的局部 Store
20.
MobX
❱
20.1.
Observable
20.2.
Actions
20.3.
Computed
20.4.
Reactions
20.5.
与 React 集成
20.6.
定义数据存储
20.7.
mobx-state-tree
21.
Zustand
❱
21.1.
创建和使用 Store
21.2.
自定义选择器
21.3.
操作 State
21.4.
在 React 之外使用
21.5.
其他常用中间件
❱
21.5.1.
持久化中间件
21.5.2.
Immer 中间件
21.5.3.
Redux 中间件
21.6.
类型声明
22.
Jotai
❱
22.1.
创建 atom
22.2.
使用 atom
22.3.
Provider 和 Store
22.4.
可重置 atom
22.5.
可刷新 atom
22.6.
持久化 atom
22.7.
Atom Family
22.8.
异步 atom
22.9.
常见应用模式
❱
22.9.1.
大型列表和对象的处理
22.9.2.
自定义工具 Hook
22.9.3.
开关 atom
22.9.4.
按条件更新 atom
22.9.5.
整合开关和 Storage
22.9.6.
整合刷新与默认值
22.9.7.
可监听变化的 atom
22.9.8.
可广播 atom
22.9.9.
防抖 atom
23.
Valtio (Coming Soon!)
24.
SWR
❱
24.1.
基本使用
24.2.
组件复用
24.3.
配置
24.4.
数据获取
24.5.
key 参数的选择
24.6.
无限加载
24.7.
重新验证
25.
React Query
❱
25.1.
基本概念和组件
25.2.
基本使用
25.3.
Devtools 配置
25.4.
构建查询
25.5.
数据更新
25.6.
数据缓存控制
26.
RxJS
❱
26.1.
基本概念
26.2.
Observable
26.3.
Subject
26.4.
Operator
27.
Immer
❱
27.1.
初始化功能
27.2.
核心函数
27.3.
柯里化
27.4.
在 React 应用中使用 Immer
27.5.
在 producer 中返回新数据
27.6.
类型定义
Light
Rust
Coal
Navy
Ayu
Live with React
常见的 atom 应用模式
在 React 应用项目中,尝尝会反复出现一些非常有特征的数据操作。它们会形成一种较为固定的对数据的操作模式。针对这些比较常见的操作模式,Jotai 提供了一些比较方便的应用模式供参考或者直接使用。
大型列表和对象的处理
自定义工具 Hook
开关 atom
按条件更新 atom
整合开关和 Storage
整合刷新与默认值
可监听变化的 atom
可广播 atom
防抖 atom