路径解析配置
- webpack
- craco 插件
craco.config.js 配置项：
const path = require('path')
module.exports = {
webpack: {// webpack 配置
alias: {// 配置别名
'@': path.resolve(__dirname, 'src')// 约定：使用 @ 表示 src 文件所在路径
},
}
}
package.json 配置项：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"report": "source-map-explorer 'build/static/js/*.js'"
},
路径联想配置：
- vscode
- jsconfig.js
{
"compilerOptions": {
"baseUrl": "./",
"paths": { "@/*": ["src/*"] }
}
}
scss：
npm i sass -S
classnames:
在 react 中想要动态添加 className 时，通常会使用
npm i classnames -S
normalize：
重置样式
npm i normalize.css
index.js 导入 import 'normalize.css'
数据模拟 json-sever：
- npm i -D josn-sever
- 准备数据
- 添加启动命令 "server": "json-server ./server/data.json --port 8080"
- 接口测试
axios 封装：
import axios from 'axios'
const request = axios.create({
baseURL: '',
timeout: 3000
})
request.interceptors.request.use((config)=>{
const token = getToken()
config.headers.Anthorization= `Bearer ${token}`
return config
},(error)=>{return Promise.reject(error)})
request.interceptors.response.use((response)=>{return response.data},(error)=>{return Promise.reject(error)})
export {request}
axios 引用：
import request from 'request'
export {
request
}
路由跳转高阶组件封装：
uselocaton的作用：
获取当前路径参数
const location = useLocation()
echarts使用：
react-quill 富文本编辑器：
安装
npm i react-quill@版本
使用
导入组件和配套样式
serve：
- 静态服务器
- npm i serve
Form.useform()：
usememo的作用和参数：
作用：
useMemo 是 React 中的一个 Hook，用于缓存计算结果，以减少不必要的计算和渲染。它通过存储计算开销很大的值，并在再次出现相同输入时返回缓存的结果，以此来加速计算机程序运行效率。
参数：
第一个参数：必须是一个纯函数，即入参相同时输出结果必定相同，并且该纯函数必须有返回值。这个函数用于计算需要缓存的值。
第二个参数：是一个依赖数组，包含了在数组中列出的变量发生变化时才重新计算值。这个依赖数组可以为空数组或包含多个依赖。当依赖项发生变化时，useMemo 会重新计算值，否则会使用缓存的结果。
补充说明：
- useMemo 可以与 useCallback 配合使用，以优化性能。useCallback 用于缓存回调函数，当入参不变时保持函数不变，避免重复渲染。
- React.memo 是另一个用于优化性能的工具，它是一个高阶组件，用于函数组件。React.memo 根据 props 的变化来决定组件是否重新渲染，与 useMemo 的作用不同。
通过使用 useMemo，可以避免依赖项未修改时的重复计算，节约计算资源。
项目启动命令合并：
'start':'react-scripts start & npm run server'
本文暂时没有评论，来添加一个吧(●'◡'●)