Learn React Hooks: Build and refactor modern React.js applications using Hooks

https://www.amazon.com/Learn-React-Hooks-refactor-applications/dp/1838641440 (opens in a new tab)

目录
1. 第一部分：Hooks 简介
- 1. 介绍 React 和 React Hooks
  - 技术要求
  - React 的原则
  - 使用 React Hooks 的动机
    - 难以理解的类
    - 包装地狱
    - Hooks 来拯救!
  - 开始学习 React Hooks
    - 使用 create-react-app 初始化项目
      - 创建一个新项目
      - 启动一个项目
      - 部署项目
    - 从一个类组件开始
      - 设置项目
      - 定义类组件
      - 示例代码
    - 使用 Hooks 替代
      - 设置项目
      - 定义函数组件
      - 示例代码
    - 比较解决方案
      - 类组件
      - 使用 Hook 的函数组件
    - Hooks 的优点
    - 迁移到 Hooks
    - Hooks 的思维模式
    - Hooks 的规则
  - 各种 Hooks 概述
    - React 提供的 Hooks
      - 基本的 Hooks
        
        useState
        
        useEffect
        
        useContext
      - 额外的 Hooks
        
        useRef
        
        useReducer
        
        useMemo
        
        useCallback
        
        useLayoutEffect
        
        useDebugValue
    - 社区 Hooks
      - useInput
      - useResource
      - 导航 Hooks
      - 生命周期 Hooks
      - 计时器 Hooks
      - 其他社区 Hooks
1. 使用 State Hook
- 技术要求
- 重新实现 useState 函数
- 我们简单的 Hook 实现的问题
  - 使用全局变量
  - 定义多个 Hooks
    - 在我们的组件中添加多个 Hooks
    - 实现多个 Hooks
    - 示例代码
  - 我们可以定义条件 Hooks 吗？
    - 示例代码
- 与真正的 Hooks 比较我们的重新实现
- Hook API 的替代品
  - 命名 Hooks
  - Hook 工厂
  - 其他替代品
- 用 Hooks 解决常见问题
  - 解决条件 Hooks
    - 总是定义 Hook
    - 分解组件
  - 在循环中解决 Hooks
    - 使用数组
    - 分解组件
- 解决条件 Hooks 的问题
  - 示例代码
1. 使用 React Hooks 编写您的第一个应用程序
- 技术要求
- 结构化 React 项目
  - 文件夹结构
    - 选择特性
    - 初始结构设计
  - 组件结构
- 实现静态组件
  - 项目设置
  - 实现用户
    - 登录组件
    - 测试我们的组件
    - 注销组件
    - 注册组件
    - 用户栏组件
    - 示例代码
  - 实现帖子
    - 帖子组件
    - 创建帖子组件
    - 帖子列表组件
  - 整合应用程序
  - 示例代码
- 使用 Hooks 实现有状态的组件
  - 为用户特性添加 Hooks
    - 调整用户栏
    - 调整登录和注册组件
      - 登录
      - 注册
    - 调整注销
    - 传递用户至创建帖子
  - 为帖子特性添加 Hooks
    - 调整应用组件
    - 调整创建帖子组件
  - 示例代码
1. 深入了解 Hooks
- 使用 Reducer 和 Effect Hooks
  - 技术要求
  - Reducer Hooks 与 State Hooks
    - State Hook 的问题
    - 动作
    - Reducers
    - Reducer Hook
  - 实现 Reducer Hooks
    - 将 State Hook 转变为 Reducer Hook
      - 替换用户 State Hook
        
        定义动作
        
        定义reducer
        
        定义Reducer Hook
      - 替换帖子 State Hook
        
        定义动作
        
        定义reducer
        
        定义Reducer Hook
    - 示例代码
    - 合并 Reducer Hooks
      - 忽略未处理的动作
    - 示例代码
  - 使用 Effect Hooks
    - 还记得 componentDidMount 和 componentDidUpdate 吗？
    - 使用 Effect Hook
      - 仅在某些属性更改时触发效果
      - 仅在挂载时触发效果
      - 清除效果
    - 在我们的博客应用中实现 Effect Hook
    - 示例代码
1. 实现 React Context
- 技术要求
- 介绍 React 上下文
  - 传递属性
  - 引入 React 上下文
    - 定义上下文
    - 定义消费者
    - 使用 Hooks
    - 定义提供者
    - 嵌套提供者
  - 示例代码
  - 上下文的替代方案
- 实现主题
  - 定义上下文
  - 定义上下文 Hooks
    - 创建 Header 组件
    - 使用 Header 组件
    - 为 Post 组件实现上下文 Hook
  - 定义提供者
  - 动态更改主题
    - 使用 State Hook 和上下文提供者
    - 实现 ChangeTheme 组件
  - 示例代码
- 使用上下文进行全局状态管理
  - 定义 StateContext
  - 定义上下文提供者
  - 使用 StateContext
    - 重构用户组件
    - 重构帖子组件
  - 示例代码
1. 实现请求和 React Suspense
- 技术要求
- 使用 Hooks 请求资源
  - 设置模拟服务器
    - 创建 db.json 文件
    - 安装 json-server 工具
    - 配置 package.json
    - 配置代理
    - 定义路由
    - 示例代码
  - 使用 Effect 和 State/Reducer Hooks 实现请求
    - 使用 Effect 和 State Hooks 的请求
    - 使用 Effect 和 Reducer Hooks 的请求
    - 示例代码
  - 使用 axios 和 react-request-hook
    - 设置库
    - 使用 useResource Hook
    - 使用 Reducer Hook 和 useResource
    - 处理错误状态
    - 实现帖子创建
    - 实现注册
    - 实现登录
  - 示例代码
- 使用 React.memo 防止不必要的重新渲染
  - 为 Post 组件实现 React.memo
  - 示例代码
- 使用 React Suspense 实现懒加载
  - 实现 React.Suspense
  - 实现 React.lazy
  - 示例代码
1. 使用 Hooks 进行路由
- 技术要求
- 创建多页面
  - 创建 HeaderBar 组件
  - 创建 HomePage 组件
  - 创建 PostPage 组件
  - 示例代码
- 实现路由
  - 定义路由
  - 定义链接
    - 定义到帖子的链接
    - 定义到主页的链接
  - 调整 CREATE_POST 操作
  - 示例代码
- 使用路由 Hooks
  - 概述 Navi 的 Hooks
    - useNavigation Hook
    - useCurrentRoute Hook
    - useLoadingRoute Hook
  - 程序化导航
  - 访问路由信息
  - 示例代码
1. 使用社区 Hooks
- 技术要求
- 探索输入处理 Hook
  - 在我们的博客应用中实现输入 Hooks
    - 登录组件
    - 注册组件
    - 创建帖子组件
  - 示例代码
- 使用 Hooks 实现 React 生命周期
  - useOnMount Hook
  - useOnUnmount Hook
  - useLifecycleHooks Hook
  - useMergeState Hook
  - 示例代码
- 各种有用的 Hooks
  - usePrevious Hook
  - 计时器 Hooks
    - useInterval Hook
    - useTimeout Hook
  - 在线状态 Hook
  - 数据操作 Hooks
    - useBoolean Hook
    - useArray Hook
    - useCounter Hook
  - 聚焦和悬停 Hooks
    - useFocus Hook
    - useHover Hook
  - 示例代码
- 使用 Hooks 进行响应式设计
  - 响应式隐藏组件
  - 示例代码
- 使用 Hooks 实现撤销/重做
  - 在我们的帖子编辑器中实现撤销/重做
- 使用 Hooks 防抖
  - 在我们的帖子编辑器中防抖更改
  - 示例代码
- 寻找其他 Hooks
1. Hooks 的规则
技术要求
- 调用 Hooks
- Hooks 的顺序
- Hooks 的名称
- 强制执行 Hooks 的规则
  - 设置 eslint-plugin-react-hooks
  - 示例代码
- 处理 useEffect 依赖性
  - 使用 eslint 自动修复警告
  - 示例代码
1. 构建您自己的 Hooks
技术要求
- 提取自定义 Hooks
  - 创建一个 useTheme Hook
  - 创建全局状态 Hooks
    - 定义 useUserState Hook
    - 定义 usePostsState Hook
  - 创建 useDispatch Hook
  - 创建 API Hooks
  - 创建 useDebouncedUndo Hook
  - 导出我们的自定义 Hooks
  - 示例代码
- 使用我们的自定义 Hooks
  - 使用 useTheme Hook
  - 使用全局状态 Hooks
    - 调整 UserBar 组件
    - 调整 Login 组件
    - 调整 Register 组件
    - 调整 Logout 组件
    - 调整 CreatePost 组件
    - 调整 PostList 组件
  - 使用 API Hooks
    - 调整 ChangeTheme 组件
    - 调整 Register 组件
    - 调整 Login 组件
    - 调整 CreatePost 组件
  - 使用 useDebouncedUndo Hook
  - 示例代码
- Hooks 之间的互动
  - 创建本地 Register Effect Hook
  - 创建本地 Login Effect Hook
  - 示例代码
- 测试 Hooks
  - 使用 React Hooks 测试库
  - 测试简单的 Hooks
    - 创建 useCounter Hook
    - 测试 useCounter 结果
    - 测试 useCounter 操作
    - 测试 useCounter 初始值
    - 测试重置和强制重新渲染
  - 测试上下文 Hooks
    - 创建 ThemeContextWrapper
    - 测试 useTheme Hook
    - 创建 StateContextWrapper
    - 测试 useDispatch Hook
    - 测试 useUserState Hook
    - 测试 usePostsState Hook
  - 测试异步 Hooks
    - async/await 构造
    - 测试 useDebouncedUndo Hook
  - 运行测试
  - 示例代码
- 探索 React Hooks API
  - useState Hook
  - useEffect Hook
  - useContext Hook
  - useReducer Hook
  - useMemo Hook
  - useCallback Hook
  - useRef Hook
  - useImperativeHandle Hook
  - useLayoutEffect Hook
  - useDebugValue Hook
1. 第三部分：集成与迁移
1. 从 React 类组件迁移
技术要求
- 使用类组件处理状态
  - 设计应用结构
  - 初始化项目
  - 定义应用结构
  - 定义组件
    - 定义 Header 组件
    - 定义 AddTodo 组件
    - 定义 TodoList 组件
    - 定义 TodoItem 组件
    - 定义 TodoFilter 组件
  - 实现动态代码
    - 定义 API 代码
    - 定义 StateContext
    - 使 App 组件动态化
    - 使 AddTodo 组件动态化
    - 使 TodoList 组件动态化
    - 使 TodoItem 组件动态化
    - 使 TodoFilter 组件动态化
  - 示例代码
- 从 React 类组件迁移
  - 迁移 TodoItem 组件
  - 迁移 TodoList 组件
  - 迁移 TodoFilter 组件
    - 迁移 TodoFilterItem
    - 迁移 TodoFilter
  - 迁移 AddTodo 组件
  - 迁移 App 组件
    - 定义操作
    - 定义 reducers
      - 定义 filter reducer
      - 定义 todos reducer
      - 定义 app reducer
    - 迁移组件
  - 示例代码
- 类组件的权衡

React 并发渲染 createRoot 副作用