就不写多余的了，直接开始吧
组件通信
父传子
子组件只能读取props的数据，并不能直接修改，只能由父组件修改
插槽
子传父
兄弟组件---状态提升
useEffect依赖项参数说明
清除副作用
reactHooks的使用规则
Redux
react使用时的配套工具
pnpm add react-redux @reduxjs/toolkit
redux调试---devtools
自行安装浏览器插件Redux DevTools
路由模块
安装react-router-dom 6.17.0
- createBrowserRouter
- RouterProvider
import { createBrowserRouter, RouterProvider } from "react-router-dom";
// 创建router实例对象，并且配置路由对应关系
const route = createBrowserRouter([
{
path: "/login",
element: <div>登录</div>,
},
{
path: "/article",
element: <div>文章</div>,
},
]);
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<RouterProvider router={route} />
</React.StrictMode>
);
路由传参方式
SeachParams传参
// 传参
navigate('/login?id=100&name=linhan')
// 接受参数
const [params] = useSeachParams()
let id = params.get('id')
params传参 需要在路由部分添加占位符匹配 /:id
// 传参
navigate('/login/1001')
// 接受参数
const params = useParams()
let id = params.id
嵌套路由的配置
实现步骤
- 使用children属性配置路由嵌套关系
- 使用 <Outlet /> 组件配置二级路由渲染位置
配置
[
{
path: "/",
element: <loyout>,
children:[
{
path: "board",
element: <Board>,
},
{
path: "about",
element: <About>,
}
]
},
{
path: "/article",
element: <div>文章</div>,
},
]
渲染
export function Layout() {
return (
<div>
<div>我是layout</div>
<Link to="/about">关于</Link>
<Link to="/board">面板</Link>
{/* 二级路由渲染出口 */}
<Outlet />
</div>
);
}
默认二级路由配置
当访问的是一级路由的时候，默认的二级路由组件也可以得到渲染，只需要早二级路由的位置去掉path 设置index属性为true
// 创建router实例对象，并且配置路由对应关系
export const route = createBrowserRouter([
{
path: "/",
element: <Layout />,
children: [
// 设置为默认二级路由
{
index: true,
element: <About />,
},
{
path: "/board",
element: <Board />,
},
],
},
]);
404路由
当浏览器输入url的路径在整个路由配置中都找不到对应的path,为了用户体验，可以使用404兜底组件进行渲染
实现步骤：
- 准备一个NotFound组件
- 在路由表数组的末尾，以* 号作为路由path配置路由
// 创建router实例对象，并且配置路由对应关系
export const route = createBrowserRouter([
{
path: "/",
element: <Layout />,
children: [
// 设置为默认二级路由
{
index: true,
element: <About />,
},
{
path: "/board",
element: <Board />,
},
],
},
/* 配置404页面 */
{ path: "*", element: <NotFound /> },
]);
两种路由模式
- history 模式
- hash 模式
ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建
| 路由模式 | url表现 | 底层原理 | 是否需要后端支持 |
|---|---|---|---|
| history | url/login | history对象 + pushState事件 | 需要 |
| hash | url/#/login | 监听hashChange事件 | 不需要 |
示例hash模式
// 切换创建路由函数
export const route = createHashRouter([
{
path: "/",
element: <Layout />,
children: [
// 设置为默认二级路由
{
index: true,
element: <About />,
},
{
path: "/board",
element: <Board />,
},
],
},
/* 配置404页面 */
{ path: "*", element: <NotFound /> },
]);
配置路径别名
CRA本身把webpack配置包装到了黑盒里无法直接修改，需要借助一个插件 craco
配置步骤：
- 安装craco
- 项目根目录创建配置文件 craco.config.js
- 配置文件添加路径解析配置
- 包文件配置启动和打包命令
pnpm add -D @craco/craco
const path = require('path')
module.exports = {
//webpack配置
webpack:{
// 配置别名
alias:{
'@':path.resolve(__dirname,'src')
}
}
}
"scripts":{
"start":"craco start",
"build":"craco build"
}
封装request请求模块
// 安装axios
pnpm add -D axios
src下创建service文件夹，在其底下同时创建index.tsx 和 request.tsx文件
// 统一中转模块函数
import { request } from "./request";
export { request };
import axios from "axios";
/**
* axios的封装处理步骤：
* 1. 根域名配置
* 2. 超时时间
* 3. 请求拦截器/响应拦截器
*/
const request = axios.create({
baseURL: "http://127.0.0.1:3000",
timeout: 5000,
});
// 添加请求拦截器
request.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
request.interceptors.response.use(
(response) => {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
},
(error) => {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
}
);
export { request };
使用redux管理token
- 新增store目录
- 创建index.tsx文件和modules目录
- modules目录底下创建user.ts模块
编写user模块代码
入口文件组装
入口文件关联组件
异步方法，完成登录获取token
login组件触发异步方法
token持久化处理
存到本地
封装token的存取删
请求头里面注入token
使用token做路由权限控制
初始化样式
// 安装Normalize.css
pnpm add normalize.css
menu菜单点击跳转路由的实现
根据当前路径高亮菜单
- 获取当前url上的路由路径
- 找到组件负责高亮的属性，绑定当前路由路径
- useLocation拿pathname
路由懒加载
打包优化
打包体积可视化
// 安装source-map-explorer
pnpm add source-map-explorer
// 启动命令
"analyze":"source-map-explorer 'build/static/js/*.js'"
