isActive?'current':null}/>
```
* 利用js跳转
* 函数组件：`useNavigate()`
```js
const navigate = useNavigate()
navigate('/home')
navigate('/mine',{replace:true})
```
* 类组件
```js
// v5-
class Home extends React.Component{
render(){
return
}
}
class App extends React.Compponent{
render(){
this.props.history;// undefined
}
}
App = withRouter(App)
// v6: 取消了props中的history,location,match，且移除了withRouter高阶组件
} />
class Login extends React.Component{
render(){
// this.props.history;// undefined
return
}
}
// 封装一个高阶组件：一个包装函数
// 需求：在类组件中实现js路由跳转
function withNavigate(InnerComponent){
return function Wrap(){
const navigate = useNavigate()
return
}
}
```
* React的UI组件库
* Ant Design(antd) 蚂蚁金服
* antd-mobile（移动端）
* Material-UI(MUI)
* React Bootstrap
> https://react-bootstrap.github.io/
* React-vant（移动端）
> https://react-vant.3lang.dev/
* axios
> api地址：http://120.76.247.5:2003/api/goods
```bash
链接：https://easydoc.net/s/58934052 密码：4wSFKBYp
```
## day2-3
### 面试题
* 防抖与节流
> 都是为了优化性能的操作，相同点都是在同一时间周期内只执行一次
* 节流：在同一时间周期内触发多次操作时，只生效第一次
* 防抖：在同一时间周期内触发多次操作时，只生效最后一次
### 知识点
* 高阶组件（HOC：High Order Component）
> 高阶组件并不是一个组件，而是一个包装函数，它的返回值才是组件
* 注意事项
* 必须传入一个函数
* 必须返回一个函数
* 必须向下传递props
* 应用场景
* 属性代理
* 提取公共代码
```js
function withNavigate(){
}
```
* 扩展运算符：`...`
* 展开
```js
const arr = [10,20,30,40]
Math.max(...arr);// 等效于 Math.max(10,20,30,40)
const props = {a:10,b:20,c:30}
// 复制对象
const newProps = {...props}
```
* 剩余
```js
const user = {name:'laoxie',age:18,gender:'male'}
const {name,...attrs} = user;// name='laoxie',attrs={age:18,gender:'male'}
function sum(){
// arguments
let total = 0
for(let i=0;i{
return args.reduce((prev,item)=>prev+item,a)
}
sum(10,20)
sum(10,20,30)
sum(10,20,30,40)
```
* React提取公共代码
* 高阶组件
```js
class Home extends React.Component{
//state = {
// list:[]
//}
//componentDidMount(){
// // 发起ajax请求(20行代码)
//}
render(){
const {list} = this.props;
return
{list}
}
}
Home = withRequestList(Home)
class List extends React.Component{
//state = {
// list:[]
//}
//componentDidMount(){
// // 发起ajax请求(20行代码)
//}
render(){
const {list} = this.props;
return
{list}
}
}
List = withRequestList(List)
class Discover extends React.Component{
//state = {
// list:[]
//}
//componentDidMount(){
// 发起ajax请求(20行代码)
//}
render(){
const {list} = this.props;
return
{list}
}
}
Discover = withRequestList(Discover)
// 利用高阶组件提取公共代码
function withRequestList(InnerComponent){
return class WrapperComponent extends React.Component{
state = {
list:[]
}
componentDidMount(){
// 发起ajax请求(20行代码)
}
render(){
return
}
}
}
```
* 自定义hook
```js
function Home(){
//const [list,setList] = useState([])
//useEffect(()=>{
// // ajax请求（20行代码）
//},[])
const list = useRequestList()
// 其他代码
// ...
return
{list}
}
function List(){
//const [list,setList] = useState([])
//useEffect(()=>{
// // ajax请求（20行代码）
//},[])
const list = useRequestList()
// 其他代码
// ...
return
{list}
}
function Discover(){
//const [list,setList] = useState([])
// useEffect(()=>{
// // ajax请求（20行代码）
//},[])
const list = useRequestList()
// 其他代码
// ...
return
{list}
}
// 利用自定义hook提取公共代码
function useRequestList(){
const [list,setList] = useState([])
useEffect(()=>{
// ajax请求（20行代码）
},[])
return list;
}
```
* 路由传参与接收
* search传参
* 传参：通过?传递
* 接收：`const [params,setParams] = useSearchParams() `
* 动态路由传参
* 传参：通过url路径传参
* 接收：`const {id} = useParams()`
* axios二次封装
> 利用axios.create()创建axios实例，并配合baseURL实现简化请求的效果
### 练习
* 实现搜索框吸顶效果
## day2-4
### 面试题
* some与every
* 如何给对象添加一个不可修改的属性
* 方案一：存储器属性之getter
```js
const source = {
age:18
}
const user = {
//age:18,
// 存储器属性getter
get age(){
return source.age
},
// 存储器属性setter
set age(newValue){
if(newValue>=18){
source.age = newValue
}else{
throw new Error('年龄不能小于18')
}
}
}
user.age;// 读取：执行getter中的代码，得到18
user.age = 20; // 写入：执行setter中的代码，并传递值
```
* 方案二：属性特性
```js
// 需求：设置一个不可修改的属性age
const user = {
age:18
}
//Object.definePropery(target,key,descriptor)
// target: 目标对象
// key: 对象的属性
// descriptor: 属性特性（值为Boolean）
// * configurable 可配置性（writable与enumberalbe的总开关）
// * writable 可写性
// * enumerable 可枚举性（是否可遍历）
// * value 值属性的值
Object.defineProperty(user,'age',{
writable:false
})
```
> 通过传统方式**添加**的属性，属性特性默认为true；通过Object.definePropery()**添加**的属性，属性特性默认为false
* 查看属性特性：Object.getOwnPropertyDescriptor()
* 对象属性分类
* 值属性：拥有值的属性
* configurable
* enumerable
* writable
* value
* 存储器属性：getter & setter
* configurable
* enumerable
* get
* set
### 知识点
* 商品分类效果
* 接口：`get /api/goods?category=男士表`
* 方案一：根据点击请求不同的数据进行渲染
* 方案二：动态路由
> 适合简单页面
* 方案三：子路由（嵌套路由）
> 使用复杂页面
* ReactRouter Hooks
* useParams() 获取动态路由参数
* useSearchParams() 获取?后的参数
* useNavigate() 获取路由跳转方法
* useLocation() 获取当前路由信息
* ``
> 类似于原生标签中的template标签或DOM中的createDocumentFragment，简写：`<>`
## day2-5
### 面试题
* 关注点分离
```js
class Home extends React.Component{
state = {
// 功能1
datalist:[],
newlist:[]
}
componentDidMount(){
// 功能1
request.get('/xxx').then(({data})=>{
this.setState({
datalist:data.data.result
})
})
// 50 rows代码
request.get('/xxx2').then(({data})=>{
this.setState({
datalist:data.data.result
})
})
}
componentWillUnmount(){
// 功能1
cancel1()
cancel2()
}
render(){
}
}
function Home(){
// 功能1
const [datalist,setDatalist] = useState([])
useEffect(()=>{
request.get('/xxx1').then(({data})=>{
setDatalist(data.data.result)
})
return function(){
cancel1()
}
})
// 功能1
const [newlist,setNewlist] = useState([])
useEffect(()=>{
request.get('/xxx1').then(({data})=>{
setNewlist(data.data.result)
})
return function(){
cancel2()
}
})
}
```
### 知识点
* 全局状态管理
* 方案一：useReducer + context实现全局状态
* 封装Provider组件，用于向下共享数据
* 封装useUser，用于简化代码
* redux
* 数据持久化
* 本地存储
### 练习
* 购物车中的商品选择后才计算价格
* 实现数据持久化
## day2-6
### 知识点
* 数据持久化(persist)
* 数据的更新（增删改）同步到本地存储（localStorage）
* 刷新时从本地存储获取数据
* 鉴权
> 需要权限才可访问
* 页面访问权限：页面需要登录才可访问
* 功能权限：某些功能需要特定用户才可使用
> 按钮级别权限
* 数据权限：拥有权限的用户才可看到这些数据
* 页面访问权限:
> 需求：用户登录后才能访问购物车页面，没登录时回退到登录页面
* 判断条件：用户访问购物车页面时，判断用户是否已登录
* 方案一: Hooks
* 方案二：HOC
* 用户体验
* 后台管理系统
> 对内：内部使用不公开的系统，特点是需要登录才能访问，对数据进行增删改查
* 常用组件
* 表格
* 表单
* UI组件库
* ant-Design
* @ant-design/icons
```bash
npm install antd
```
* 项目搭建
* 手动配置
* CLI工具
* CRA：create-react-app
* 自定义webpack配置：react-app-rewired
> 让我们在不修改CRA配置的基础上拥有webpack的配置权
1. 的根目录中创建`config-overrides.js`文件，并修改webpack配置
```js
module.exports = function(config){
// config: 原有webpack配置
}
```
> PS: react-app-rewired2.x 已经把所有配置方法移置到了customize-cra模块
```js
const {override,addDecoratorsLegacy,disableEsLint,useBabelRc,fixBabelImports} = require('customize-cra');
module.exports = override(
addDecoratorsLegacy(), // 装饰器支持
fixBabelImports('import',{ libraryName: "antd", style: "css" })
)
```
2. 重写npm script
```bash
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
```
* Vite
1. 创建项目
```bash
npm create vite
```
2. 安装依赖
```bash
npm install
```
3. 启动项目
```bash
npm run dev
```
### 练习
* Manage页面权限访问控制
> 只有登录后才能访问
* 共享用户信息
## day2-7
### 知识点
* redux： 全局状态管理
> redux与react为两个独立产品，他们之间没有直接联系
1. 安装
```js
npm i redux
```
2. 核心API
* 创建数据仓库：store
```js
const store = createStore(reducer,state)
```
* store对象的方法
* getState() 获取state全局状态
* dispatch(action) 修改state
* subscribe(callback) 监听，当state被修改时，callback会被自行
* 全局状态：state
* 修改状态的方法：reducer
> reducer必须为一个纯函数，必须返回一个新的state
```js
const reducer = (state,action)=>{
switch(action.type){
}
}
```
* 操作全局状态的命令：action
> 格式：`{type,payload}`
3. 在react组件中操作redux全局状态
* 获取：`store.getState()`
```js
// 在Manage.jsx中获取redux数据
```
* 修改
```js
const action = {type:'login',payload:{}}
store.dispatch(action)
```
* 监听
```js
store.subscribe(function(){
})
```
* 利用自定义hook或高阶组件实现redux数据获取
* `withStore()`
* 函数柯里化
> 利用多个函数收集不同参数，然后统一处理的方式
```js
withStore()()()();
function withStore(){
return function(){
return function(){
return function(){
}
}
}
}
```
* 可选链操作符： `?.`
## day3-1
### 面试题
* 箭头函数中如何获取实参（arguments）
```js
const sum = (...args)=>{
}
sum(1,2)
sum(10,20,30)
sum(5,10,15,20)
const arr = [1,2,3,4,5]
sum(...arr);// sum(1,2,3,4,5,6)
```
### 知识点
* react-redux
1. 安装
```bash
npm i react-redux
```
2. 使用Provider组件共享Redux状态
```js
```
3. 在组件中使用redux数据
* 高阶组件： connect()
* hooks
* useStore
```js
const store = useStore()
const {userInfo} = store.getState()
```
* useSelector （推荐）
```js
const userInfo = useSelector(state=>state.userInfo)
```
* useDispatch
```js
const dispatch = useDispatch()
dispatch({type:'logout'})
```
* 后台管理系统模块:商品管理
* 商品列表：Table
* 展示商品数据 OK
* 分页 OK
> 刷新后保留分页与每页数量信息
* 添加 OK
* 编辑 OK
* 删除 OK
* 批量删除 OK
* 上下架 （练习）
* 编辑：Form
* 如何把ajax请求回的数据写入表单
* initialValues: 只有在初始化时生效，不适合ajax请求回的数据
* myform.setFieldsValue(values)
```js
// 创建表单实例
const [myform] = Form.useForm()
// 关联表单实例