让函数组件具有维持状态的能力

执行副作用，useEffect 的第二个参数告诉 React 用到了哪些外部变量

类似于Vue watch的作用

useEffect(fn, deps);

1.每次 render 后执行：不提供第二个依赖项参数。

比如useEffect(() => {})。

2.仅第一次 render 后执行：提供一个空数组作为依赖项。

比如useEffect(() => {}, [])。

3.第一次以及依赖项发生变化后执行：提供依赖项数组。

比如useEffect(() => {}, [deps])。

4.组件 unmount 后执行：返回一个回调函数。

比如useEffect() => { return () => {} }, [])。

讯享网

缓存回调函数。

useCallback(fn, deps)

useCallback是React Hooks中的一个函数，用于优化函数组件的性能。它的作用是返回一个memoized（记忆化的）函数，这个函数只有在依赖项发生变化时才会重新计算，否则会直接返回上一次计算的结果。 

例子：

例子2：

讯享网

缓存计算的结果，类似于Vue中computed的作用

在多次渲染之间共享数据

讯享网

定义全局状态

很多状态管理框架，比如 Redux，正是利用了 Context 的机制来提供一种更加可控的组件之间的状态管理机制。

创建一个 React ref 对象

是 React 提供的一个高阶组件（Higher-Order Component），用于优化函数组件的性能。它类似于类组件中的 方法，用于在 props 发生变化时判断是否重新渲染组件。

讯享网

就是一种加载组件优化，提升用户体验。

：真正的 UI 渲染内容。

讯享网

：真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。

讯享网

接受初始状态的函数、reducer 函数的对象和“切片名称”， 并自动生成与 reducer 和 state 相对应的动作创建者和动作类型。类似于 Vue 中 Vuex 中的

例子：

讯享网

一个接受 Redux 操作类型字符串的函数和一个应该返回 promise 的回调函数。通常用于处理异步逻辑。

在 Redux 中定义动作的常用方法是分别声明一个动作类型常量和一个动作创建器函数来构造该类型的动作。与createAsyncThunk区别是：一个同步一个异步。

讯享网

用于创建 Redux 中的 reducer

• initialState ：第一次调用 reducer 时应使用的初始状态。这也可能是一个“延迟初始值设定项”函数，该函数在调用时应返回初始状态值。每当调用 reducer with 作为其状态值时，都会使用它，并且主要用于从 中读取初始状态等情况。
• builder回调 接收要定义的构建器对象的回调 大小写缩减器通过调用 .

讯享网

共享状态,从Redux的store中提取数据（state）

selector 在概念上大约等同于 mapStateToProps argument to connect。

selector 将以整个 Redux store state 作为唯一的参数被调用。每当函数组件渲染时，selector 就会被运行（除非在组件的前一次渲染后引用没有改变，这样 hooks 就会返回缓存的结果，而不是重新运行 selector）。 也会订阅 Redux store，每当有 action 被 dispatched 时就会运行 selector。

全等比较和更新

默认的对比方式是严格的  引用比较

讯享网

 结合useEffect做全局的store监听：

提供了一个简单而灵活的方式来创建 Redux store，使得 Redux 应用的设置过程更加轻松和高效。它是 Redux Toolkit 提供的一个重要工具，可以帮助开发者更快地搭建和管理 Redux 应用。

讯享网

综合案例：使用 createSlice、createAsyncThunk 和 configureStore 

在 Redux 应用中， 和 都用于触发 action，但它们的使用方式略有不同。

1. store.dispatch: 用于分发 action 到 Redux store 中。它通常在组件外部被调用，比如在 Redux 相关的业务逻辑代码中或者 Redux 中间件中。示例：。
2. dispatch: 是一个函数，通常通过 React Redux 提供的 hook 或者 函数的返回值来获取。它用于在 React 组件中分发 action。 函数本质上是 的封装，用于在组件中直接触发 action，而不需要显式地引用 Redux store。示例：。

总的来说， 是 Redux store 实例的方法，用于在 Redux 应用的任意位置触发 action，而 是一个函数，通常在 React 组件中使用，用于触发 action 并更新 Redux store 中的状态。

讯享网

这个 hook 返回一个对 Redux store 中的  函数的引用。dispatch结合store使用

为什么很少使用 ？

• 在 React Redux 中， 允许你从默认的上下文中获取当前的 Redux store 实例。然而，它在实际开发中很少被使用，因为大多数情况下，我们不需要直接访问整个 store。
• 使用  的主要原因是为了访问 store 的状态或执行一些自定义逻辑。但是，这通常不是**实践，因为 React Redux 提供了更高级的 API 来处理 store 交互，例如  和 。

讯享网

共享状态,从Redux的store中提取数据（state）

selector 在概念上大约等同于 mapStateToProps argument to connect。

selector 将以整个 Redux store state 作为唯一的参数被调用。每当函数组件渲染时，selector 就会被运行（除非在组件的前一次渲染后引用没有改变，这样 hooks 就会返回缓存的结果，而不是重新运行 selector）。 也会订阅 Redux store，每当有 action 被 dispatched 时就会运行 selector。

讯享网

组合reducer

 用于在React应用程序中进行路由导航

讯享网

用于获取当前页面的 URL 信息。它返回一个包含当前 URL 信息的 location 对象，包括 pathname、search、hash 等属性。

路由配置：

讯享网

 项目启动入口：

 App.tsx配置：

讯享网

 通过useRoutes(routes)将路由加载进去

是 React Router 提供的一个高阶组件（Higher-Order Component），用于将路由信息注入到组件中。它可以将 React Router 的 history、location 和 match 对象作为 props 传递给被包裹的组件。

讯享网

通过withRouter定义错误页面：

讯享网

使用：

 组件允许你通过  prop 指定一个备用的上下文。如果你正在构建一个复杂的、可复用的组件，并且你不希望 store 与 consumer 应用程序可能使用的任何 Redux store 相冲突，那么这很有用。

要通过各种 hook API 访问备用上下文，请使用 hook creator 函数：

讯享网