速通React！第二章！

1. React 路由

前端路由：根据某个路径 跳转到指定的页面，路径和页面是一对一的关系。

1.1 搭建路由模块

1.1.1 安装 react-router 包

npm i react-router-dom

这个命令默认安装 react-router 最新的版本

1.1.2 创建页面

在 pages 的文件夹下新建 Home、User、Order 三个页面：

1.1.3 配置路由模块

在 router 文件夹下面新建 index.js 文件，配置路由模块

1.2 路由跳转

1.2.1 声明式导航

通过 Link 标签指定要跳转到哪里，to 属性指定跳转路径。

因为我们在 /router/index.js 里面配置了 path 为 "/" 时跳转到 Home 页面，所以启动项目默认显示的是 Home 页面的内容。

在 Home 页面，Link 标签用来声明导航的页面：

1.2.2 编程式导航

1.跳转指定页面

通过 React 内置的 useNavigate 库跳转指定的页面

2.禁用浏览器回退按钮

replace 属性设置为 true，例如;

<button onClick={() => navigate('/user')}> 跳转到用户管理 </button>
<button onClick={() => navigate('/order', { replace: true })}> 跳转到订单管理 </button>

1.3 传递和获取参数

1.3.1 searchParams 传参

1.传递参数

直接在路径后面拼接参数

 <button onClick={() => navigate('/user?id=1001&name=zhifou')}> 跳转到用户管理 </button>

2.接收参数

使用 react 内置的 useSearchParams 函数获取参数：

1.3.2 params 传参

在 path 路径后面直接传递参数

1.修改路由配置

冒号表示要动态传递的参数

2.传递参数

3.接收参数

通过 useParams 函数接收参数

1.4 嵌套路由

• 1.通过 children 属性来配置路由嵌套关系
• 2.通过 Outlet 标签来配置二级路由渲染位置

修改 Home.js 页面，这里我们做这样的布局：

其中最重要的是 content 里面的内容，左侧是菜单，右侧显示主要内容。

Outlet 标签是一个占位符，相当于 Vue 的 router-view 标签，主要用来渲染嵌套路由（子路由）的页面。

1.5 默认二级路由

删除 Welcome 的 path 属性，并设置 index 属性为 true。

讲解：前面的例子中项目启动之后先进入到 Home 页面，因为我们配置默认二级路由是 Welcome，所以 Home 页面右侧默认显示 Welcome 页面的内容，Welcome 页面的内容会替换 Outlet 占位符。

1.6 配置 404

1.新建 404 页面

2.配置路由

在路由表数组的末尾，用 * 作为 path 的值。

1.7 路由模式

React 创建路由的时候有两种模式：createBrowserRouter 和 createHsahRouter，其中 createHsahRouter（哈希）模式创建路由的路径带 "#"号。

2. Hooks

在 React 16.8 版本之前，我们只能在类组件里面管理 State 和使用一些生命周期函数，这对于函数组件来说太不公平了。

后来，React 16.8 版本引入了 Hooks，我们可以在函数组件里面管理状态，也可以使用一些"生命周期函数"了。

Hooks 就相当于 React 给函数组件新加的 Buff，函数组件变得更加牛逼好用了！所以在 React 16.8 之后，官方推荐优先使用函数组件。

Hooks 本质：一套 JS 工具集。

接下来给大家介绍一下 React 常用的内置 Hooks

2.1 Hooks

2.1.1 useState

• 作用：在函数组件中管理 state。
• 返回值： 包含 state 值和修改该值的函数的数组。

案例：

import { useState } from 'react'
const Home = () => {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <h1>count的值：{count}</h1>
      <button onClick={() => { setCount(count + 5) }}>点击</button>
    </div >
  );
}
export default Home;

2.1.2 useEffect

1.函数副作用

在 React 中，函数副作用指的是那些除了渲染 UI 之外，与外部系统交互的操作。这些操作可能会改变外部系统的状态，或者依赖于外部系统的状态。副作用的例子包括：

• 数据获取：从服务器获取数据。
• 订阅：订阅一个事件源或WebSocket连接。
• 手动修改 DOM：直接操作浏览器的 DOM
• 存储：读写浏览器的本地存储（localStorage）或会话存储（sessionStorage）。
• 网络请求：发送 AJAX 请求或使用其他网络服务。

在 React 组件的生命周期中，副作用通常需要在特定的时刻执行，比如组件挂载（mount）后、更新（update）后或卸载（unmount）前。React 提供了几种处理副作用的方式：

• 1.在类组件中使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount 函数中执行
• 2.在函数组件中使用 useEffect Hook

2.useEffect 语法

useEffect 可以让你在函数组件中执行副作用操作，它接受两个参数：

• 1.一个函数，包含要执行的副作用代码。
• 2.一个依赖数组，当数组中的值变化时，副作用函数会重新执行

useEffect 还允许你返回一个清理函数，这个函数会在组件卸载或下一次执行 useEffect 之前运行。这非常适合于清理副作用，例如取消网络请求或清除定时器。

3.useEffect 案例

3.1 页面初始化会执行一次 useEffect，然后每次组件内部 state 变化时继续执行 useEffect 函数。

3.2 依赖数组为空数组，组件只在首次渲染时执行一次

 useEffect(() => {
    console.log('执行副作用')
  }, [])

3.3 添加特定依赖项，副作用函数在首次渲染时执行，在依赖项发生变化时重新执行

useEffect(() => {
    console.log('执行副作用')
  }, [count])

这里只会在 count 变化时再次执行

3.4 清理副作用

通过 return 清理副作用，例如清理定时器、清理页面监听等。

useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => {
      // 用来清理副作用
      clearInterval(timer)
    }
  }, [count])

2.1.3 useRef

作用：获取 DOM 对象和组件实例，类似于类组件中的 createRef 方法。

2.1.4 useContext

作用：在函数组件中订阅 React 的 Context，比类组件使用起来更加方便。

1.创建共享的 context

2.顶级组件共享数据

3.低级组件获取数据

3. Zustand

Zustand 是一个用于 React 应用程序的状态管理库，由 Poimandres 团队开发。它以其简洁和灵活著称，致力于提供一个轻量、简单和强大的解决方案来管理应用状态。

3.1 安装 Zustand

npm install zustand

3.1.1 案例一：计数器

1.创建一个 counterStore

2.使用

3.1.2 案例二：发起异步网络请求

1.创建 useProductStore

2.使用

4. 安装使用 ant-design

Ant Design 是蚂蚁金服开发的一套企业级的 UI 设计语言和 React 实现，主要用于构建中后台产品的界面。

官网：

https://ant-design.antgroup.com/index-cn

4.1 安装

npm install antd --save

4.2 使用