源码下载

React 是一个怎样的库？

为什么要使用 React?

从页面思维转向组件思维

React 项目的开发流程

安装 Node.js 和 yarn

配置开发工具

创建一个 React 项目

利用 JSX 编写页面结构

JSX 与 HTML 的区别

在 JSX 中使用 JS 表达式来展示内容

展示列表元素

根据条件渲染元素

注意：JSX 对于假值的处理

在 JSX 中使用注释

处理事件

通过 className 添加样式

添加内联样式

展示图片

什么是组件？

创建一个组件

在 JSX 中使用组件

给组件传递 Props

给 props 设置默认值

给组件传递 Children，实现自定义组件视图

给组件传递事件监听

子组件给父组件传值

什么是状态?

使用 useState 定义组件状态

更新组件状态

更新数组状态

更新对象状态

处理用户的输入

input、select、radio、checkbox的处理

定义多个状态

使用循环的方式渲染多个 checkboxes 和 radios

表单整体提交事件处理

表单重置事件处理&状态还原

表单验证

什么是副作用？

错误使用副作用的例子

使用 useEffect() 执行副作用

useEffect() 的执行时机与依赖数组的作用

清理副作用

useEffect() 中使用异步函数

Fragments：解决 JSX 只能有一个根元素的问题

JSX 复用与可阅读性：保存 JSX 到变量中

条件渲染的另一种形式

导出子组件<MyComponent.SubComponent/>

一次性传递多个属性：MyComponent {...props}

组件的数据流向：单向数据流

子组件跟父组件进行通信（传值）

props 可以接收任何类型的值

Render props：给 props 传递 JSX

验证 Props 的类型

利用 children 让子组件给父组件传值

中间组件：Props 透传

ClassName 属性传递与合并

状态提升：不同组件之间如何共享状态？

注意：状态更新是异步的

正确访问上一次修改的状态的方式

useReducer: 集中处理状态更新逻辑

状态和 Props 的区别总结

useEffect 空依赖数组就完全没有问题吗？

函数作为 useEffects 依赖时，如何避免不要的重新渲染

不必要的函数依赖：把函数定义在外界

不滥用useEffects：把useEffect转换为事件监听

在请求远程数据时避免重新渲染（界面闪现）

useEffect 只能在组件顶级作用域中使用

处理组件错误

组件懒加载：实现代码分割，提高页面加载速度

引入 SVG 图标的方式

避免"../"：绝对路径导入

利用 Children 避免组件过度嵌套

组件概念：受控组件

组件概念：非受控组件

组件概念：高阶组件（已被 hooks 代替）

什么是 Hooks

编写自定义的 hooks

给 Hooks 传递参数

在不同组件中复用 Hooks 逻辑

多个 Hooks 联动

HTTP 简介

使用 fetch 发送 GET 请求，加载远程数据

Loading 加载状态展示

传递 URL query 查询参数

发送 POST、DELETE、PUT 请求到服务器

设置 HTTP Headers

处理请求错误

配置代理：解决跨域问题

AbortController: 取消请求

封装 Fetch

使用 Axios 发送请求

axios 取消请求

封装 Axios

获取 HTML DOM 实例

在 useEffect 中执行 DOM 操作

fowardRef：让父组件获取子组件实例

useImperativeHandle：暴露组件方法

useId：生成唯一且不重复的 id 值

安装 React 开发者工具

开发者工具：审查 Components

开发者工具：测试性能

断点调试：一步一步检查结果

打包 React 项目为产品环境静态页面

React 运行原理：jsx 是如何编译成 HTML 的

reconciliation 协调过程和 diff 算法

使用 useMemo 避免不必要的重复计算

使用 React.memo 缓存组件

使用 useCallback 缓存函数

减少依赖：当 useCallback 依赖数组包含状态时

Styled Component 简介

安装Styled Components和

给普通 HTML 元素添加样式

组织样式的方式

覆盖样式

给普通 React 组件添加样式

在样式中访问 props

嵌套样式

定义主题

实现组件多态

原生 CSS 过渡 transition

原生 CSS 动画 keyframes

原生 JS 动画：Web Animation

RTG - 实现入场和离场动画

RTG 组件切换动画

RTG 列表项过渡动画

RTG 与 Animate CSS 集成

React Router 简介

安装 React Router & 项目介绍

配置 React Router 路由渲染第一个页面

配置路由默认首页及Outlet

配置子路由

使用 Link 实现客户端路由跳转

使用和配置 loader 加载远程数据

访问 loader 加载好的数据并展示

获取动态路由的参数并加载数据

高亮选中导航菜单

使用 Form 发送 GET 请求，控制按钮的路由跳转

使用 Form 和 Action 发送 POST 请求添加数据

使用 redirect 重定向页面

展示表单默认值

使用 Form 和 Action 发送 PUT 请求更新数据

使用 Form 和 Action 发送 Delete 删除数据

navigate：编程式的控制导航

使用 Form 和 Action 发送 GET 请求+请求参数

编程式的提交表单

URL 与 Form 表单项同步

push vs replace

实现操作数据但不发生路由跳转

友好用户体验：乐观 UI

全局加载状态展示

局部加载状态展示：搜索状态

配置错误组件并访问错误信息

错误边界

抛出自定义错误

json utility：返回客户端 JSON 数据

先渲染后加载数据：Deferred 数据访问和加载状态展示

使用 useAsyncValue 访问 deferred 数据

在 Await 中访问 fetcher

配置滚动恢复

使用 JSX 配置路由

为什么使用 React Context API

创建 Context

组织 Context 代码

Context 结合 useReducer 实现全局状态管理

Redux 简介&为什么需要全局状态管理

Redux Toolkit: 官方 Redux 脚手架工具

本章项目介绍

源码简介&添加 Redux 到项目中

配置 Redux Store

创建 Slice：Redux Toolkit 全新状态管理方式

使用 selector 在组件中读取状态

添加 Reducers & Actions 修改状态

Redux 开发者工具简介

使用 Selector 访问其他 Slice 的状态

修改数组中的状态

本地表单状态管理

全局表单状态管理：搜索

全局表单状态管理：排序

全局表单状态管理：过滤

在 selector 中调用其他 Selector

练习：剩余单词，进度

Redux 中间件 & Redux Thunk 简介

在thunk中获取全局状态

项目修改 & 后端准备

async thunk 处理 GET 请求

触发 async thunk 并现实加载和错误状态

处理 POST 请求

处理 PUT 请求，并访问全局状态

RTK Query 简介

RTK Query 加载数据

RTK Query 修改数据

RTK Query 刷新数据

RTK Query 乐观 UI