# react 移动端

**Repository Path**: baidizi/react---mobile

## Basic Information

- **Project Name**: react 移动端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-19
- **Last Updated**: 2024-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#      	react 学习



## react 介绍

![image-20241019154949582](assets/image-20241019154949582.png)

![image-20241019160013183](assets/image-20241019160013183.png)

![image-20241019160317426](assets/image-20241019160317426.png)



![image-20241019160331282](assets/image-20241019160331282.png)

![image-20241019160527657](assets/image-20241019160527657.png)

![image-20241019160619993](assets/image-20241019160619993.png)



![image-20241019160701182](assets/image-20241019160701182.png)

![image-20241019160735669](assets/image-20241019160735669.png)

项目初始化

```
// 1.直接npx安装
//（npx是npm5.2+附带的package运行工具,和npm差不多版本，功能不太一样，不知道的话可以去搜一下）
 
npx create-react-app  "项目名称"
 
// 2.先安装 create-react-app，在创建react项目
 
npm install -g create-react-app
 
npx create-react-app  "项目名称"
 
 
cd my-app
npm start
 
```



## 页面初始化

构建完之后 只留一个index.js 和 App.js 这两个文件 

index.js

![image-20241019162216840](assets/image-20241019162216840.png)

![image-20241019162226938](assets/image-20241019162226938.png)



App.vue 

![image-20241019162331263](assets/image-20241019162331263.png)



#### 推荐的一个官网

```
https://zh-hans.react.dev/learn/start-a-new-react-project
```



## jsx



### 介绍

![image-20241019164548007](assets/image-20241019164548007.png)

用js编成的形式写html标签

### 本质上是扩展语法

![image-20241019164636585](assets/image-20241019164636585.png)

可以在这个网站上体验一下 jsx  转换成 js

```
babeljs.io.repl
```



![image-20241019164840746](assets/image-20241019164840746.png)





### jsx 基本使用

![image-20241019165004678](assets/image-20241019165004678.png)

![image-20241019165659992](assets/image-20241019165659992.png)



### jsx中实现列表渲染

![image-20241019165937509](assets/image-20241019165937509.png)

![image-20241019170616608](assets/image-20241019170616608.png)



### 条件渲染

![image-20241019170738205](assets/image-20241019170738205.png)

![image-20241019170850604](assets/image-20241019170850604.png)



### 复杂条件渲染



![image-20241019171233115](assets/image-20241019171233115.png)

![image-20241019171327984](assets/image-20241019171327984.png)



### 事件绑定

![image-20241019171419523](assets/image-20241019171419523.png)

#### 原事件对象的参数

![image-20241019171504274](assets/image-20241019171504274.png)



#### 传递自定义参数

这里采用的是函数回调的形式进行传参

![image-20241019171555620](assets/image-20241019171555620.png)

![image-20241019171932529](assets/image-20241019171932529.png)



注意这里直接绑定的话 相当于直接调用一次  是可以传递 但只能是一次回调  应该是和jsx的特性有关，被当成一个函数回调了



所以这里注意 使用 onClick的绑定函数的时候要不使用 函数的名字  要不就使用函数的定义  



#### 同时传递事件对象参数和自定义参数

![image-20241019172231420](assets/image-20241019172231420.png)





## react组件

![image-20241019172541533](assets/image-20241019172541533.png)

![image-20241019172621343](assets/image-20241019172621343.png)

![image-20241019182750609](assets/image-20241019182750609.png)





## react Hook



### useState 数据驱动UI更新

![image-20241019182920754](assets/image-20241019182920754.png)

![image-20241019183122124](assets/image-20241019183122124.png)



#### 状态不可变

![image-20241019183345881](assets/image-20241019183345881.png)



#### 修改对象状态

![image-20241019183448324](assets/image-20241019183448324.png)



## 组件的样式处理

![image-20241019183638281](assets/image-20241019183638281.png)



![image-20241019183853819](assets/image-20241019183853819.png)

注意这里使用行内的写法的话 里面的属性要使用驼峰写法



## 实战评论

### 列表渲染（查）

![image-20241019184055991](assets/image-20241019184055991.png)

这里通过  useState 接受数据 传递给ui上的然后的就是 map 渲染 出子元素



### 列表删除 （删）

![image-20241019184611585](assets/image-20241019184611585.png)



这里使用fileter 过滤出新数组返回到 setCommentList中 （删）

![image-20241019184930878](assets/image-20241019184930878.png)



### 渲染Tab+点击高亮实现 （增）

![image-20241019185305958](assets/image-20241019185305958.png)

传统的 className 需要使用模板表达式

![image-20241019185549119](assets/image-20241019185549119.png)

### 排序功能（改）

![image-20241019203757295](assets/image-20241019203757295.png)

```
loadsh // 一个 封装了很多工具方法的函数

npm i lodash
```



![image-20241019204231010](assets/image-20241019204231010.png)

![image-20241019204204873](assets/image-20241019204204873.png)



## classnames 优化类名控制

![image-20241019212248047](assets/image-20241019212248047.png)

```
npm i classnames
```



## 受控表单组件

![image-20241019212655618](assets/image-20241019212655618.png)



## useRef

![image-20241019212947409](assets/image-20241019212947409.png)

![image-20241019213216021](assets/image-20241019213216021.png)



## 实战评论

### 发布评论



![image-20241019213309791](assets/image-20241019213309791.png)

使用useRef获取e.taget.value 获取内容，将内容转到用回调函数 中使用useState获取传递 最后直接用发布将收集的内容放到评论列表

### ID处理和时间处理

![image-20241019213847519](assets/image-20241019213847519.png)



```
npm i uuid

import { v4 as uuidv4 } from 'uuid'
uuidv4()
```



```
npm install dayjs

const dayjs = require('dayjs')
dayjs().format()
// 样例
dayjs(new Date()).format('MM-DD hh:mm')
dayjs('2019-05-25').format(‘DD/MM/YYYY’)
```



### 清空内容和重新聚焦

![image-20241019214716280](assets/image-20241019214716280.png)

![image-20241019215748698](assets/image-20241019215748698.png)



## 组件通讯



![image-20241019215919112](assets/image-20241019215919112.png)



### 父传子

![image-20241019215942456](assets/image-20241019215942456.png)

![image-20241019220106662](assets/image-20241019220106662.png)



### prop 说明

![image-20241019220233004](assets/image-20241019220233004.png)

### 父传子-特殊的prop children  (类似插槽)

![image-20241019220524458](assets/image-20241019220524458.png)

### 子传父

 同过传递函数 ，然后子组件用传递过来的函数回调

![image-20241019220818546](assets/image-20241019220818546.png)



### 状态提升

将变量传给共同的父组件

![image-20241022195343059](G:\react\react---mobile\assets\image-20241022195343059.png)



### 使用context![image-20241022195700258](G:\react\react---mobile\assets\image-20241022195700258.png)

![image-20241022201638859](G:\react\react---mobile\assets\image-20241022201638859.png)



## useEffect

![image-20241022201755125](G:\react\react---mobile\assets\image-20241022201755125.png)



### 基础用法

就像像是可以用来模拟生命周期里面的onMounted

![image-20241022201930757](G:\react\react---mobile\assets\image-20241022201930757.png)

![image-20241022202905797](G:\react\react---mobile\assets\image-20241022202905797.png)

```
  import { useEffect } from "react";

  const URL = "http://geek.itheima.net/v1_0/channels";

  function App() {
    useEffect(() => {
      async function geList() {
        const res = await fetch(URL);
        const data = await res.json();
        console.log(data);
      }
      geList();
    }, []);
    return <div></div>;
  }
  export default App;

```

### 高级用法

![image-20241022203411779](G:\react\react---mobile\assets\image-20241022203411779.png)

第一种 onMount + onLoad

第二种 onMount

第三种 onMount+ watch



### 清除副作用

![image-20241022204723763](G:\react\react---mobile\assets\image-20241022204723763.png)

![image-20241022204759608](G:\react\react---mobile\assets\image-20241022204759608.png)



写一个return函数即可  相当于组件卸载了的时候去执行一下return里面的代码

![image-20241022204939223](G:\react\react---mobile\assets\image-20241022204939223.png)





## 自定义hooks

![image-20241022205216877](G:\react\react---mobile\assets\image-20241022205216877.png)

​	

就用来封装一下逻辑 方便复用  为什么这个叫自定义hook呢？不叫自定义函数呢？因为这和下面的react hook的规则有关

如果没有使用react hook 的话就可以使用自定义函数 不然都是自定义hook

![image-20241022205605584](G:\react\react---mobile\assets\image-20241022205605584.png)



![image-20241022205842358](G:\react\react---mobile\assets\image-20241022205842358.png)

## react hook的使用规则

![image-20241022210007142](G:\react\react---mobile\assets\image-20241022210007142.png)

注意这个hooks是说的事use开头的





## 实战 评论列表的优化

![image-20241022211135836](G:\react\react---mobile\assets\image-20241022211135836.png)

![image-20241022222745948](G:\react\react---mobile\assets\image-20241022222745948.png)



### mock 服务

```
npm install json-server
```

![image-20241022222845043](G:\react\react---mobile\assets\image-20241022222845043.png)





创建 json-server 需要的dp.json文件

创建命令 创建数据



![image-20241022223517281](G:\react\react---mobile\assets\image-20241022223517281.png)

```

```



然后加入命令 启动服务



前端则注意安装 

```
npm i axios
```



![image-20241022223811344](G:\react\react---mobile\assets\image-20241022223811344.png)





### 复杂组件

![image-20241022232324161](G:\react\react---mobile\assets\image-20241022232324161.png)

这里直接封装成一个item组件 然后使用组件传值即可

![image-20241022232616381](G:\react\react---mobile\assets\image-20241022232616381.png)

这里就是封装完之后的结果  



## redux

![image-20241025142047611](G:\react\react---mobile\assets\image-20241025142047611.png)



### 简单实现

![image-20241025142105672](G:\react\react---mobile\assets\image-20241025142105672.png)



```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redux Counter Example</title>
</head>
<body>
    <div id="decrement">-</div>
    <div id="count">0</div>
    <div id="increment">+</div>

    <!-- 引入 Redux -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.1.1/redux.min.js"></script>


    <script>
        // 1.定义 redux reducer 函数
        function reducer(state = { count: 0 }, action) {
            if (action.type === 'INCREMENT') {
                return { count: state.count + 1 };
            }
            if (action.type === 'DECREMENT') {
                return { count: state.count - 1 };
            }
            return state;
        }

        //2 使用 reducer 函数生成 store 实例
        const store = Redux.createStore(reducer);

        //3 通过 store 实例的 subscribe 订阅数据变化
        // 回调函数可以在每次state发生变化的时候自动执行
        store.subscribe(() => {
            console.log('state变化了',store.getState());
            const countElement = document.getElementById('count');
            countElement.innerHTML = store.getState().count;
        });

        // 通过 store 实例的 dispatch 方法提交 action 更改状态
        const incrementBtn = document.getElementById('increment');
        incrementBtn.addEventListener('click', () => {
            store.dispatch({ type: 'INCREMENT' });
        });

        const decrementBtn = document.getElementById('decrement');
        decrementBtn.addEventListener('click', () => {
            store.dispatch({ type: 'DECREMENT' });
        });

        // 5 通过syore实例的getState方法获取最新状态更新到视图中

    </script>
</body>
</html>
```

![image-20241025143713171](G:\react\react---mobile\assets\image-20241025143713171.png)



### 在react中实现

![image-20241025143951427](G:\react\react---mobile\assets\image-20241025143951427.png)

![image-20241025144019066](G:\react\react---mobile\assets\image-20241025144019066.png)

vite创建项目可以用

```
npm create vite
```





![image-20241025150511553](G:\react\react---mobile\assets\image-20241025150511553.png)

### 使用

![image-20241025150807845](G:\react\react---mobile\assets\image-20241025150807845.png)

![image-20241025150836261](G:\react\react---mobile\assets\image-20241025150836261.png)

注册一个redux模块

![image-20241025151042922](G:\react\react---mobile\assets\image-20241025151042922.png)





#### 使用方式

![image-20241025152627072](G:\react\react---mobile\assets\image-20241025152627072.png)

![image-20241025153520216](G:\react\react---mobile\assets\image-20241025153520216.png)



![image-20241025154034296](G:\react\react---mobile\assets\image-20241025154034296.png)

![image-20241025155129333](G:\react\react---mobile\assets\image-20241025155129333.png)



#### 传参数

![image-20241025160216388](G:\react\react---mobile\assets\image-20241025160216388.png)

![image-20241025160239669](G:\react\react---mobile\assets\image-20241025160239669.png)

#### 异步使用

![image-20241025162004534](G:\react\react---mobile\assets\image-20241025162004534.png)

![image-20241025162303090](G:\react\react---mobile\assets\image-20241025162303090.png)

![image-20241025162401189](G:\react\react---mobile\assets\image-20241025162401189.png)

![image-20241025162423699](G:\react\react---mobile\assets\image-20241025162423699.png)

![image-20241025164349784](G:\react\react---mobile\assets\image-20241025164349784.png)

![image-20241025164411424](G:\react\react---mobile\assets\image-20241025164411424.png)

![image-20241025164620754](G:\react\react---mobile\assets\image-20241025164620754.png)



#### 调试工具

![image-20241025170900916](G:\react\react---mobile\assets\image-20241025170900916.png)



### 综合实战

![image-20241025171228756](G:\react\react---mobile\assets\image-20241025171228756.png)

![image-20241025171309346](G:\react\react---mobile\assets\image-20241025171309346.png)



#### 这里使用模板快速初始化  然后实现crud功能即可

模板在压缩包

启动start 启动server即可



#### 分类和商品列表渲染实现

![image-20241025174057319](assets\image-20241025174057319.png)

![image-20241027011930018](G:\react\react---mobile\assets\image-20241027011930018.png)



这里封装一下redux的同步任务和异步任务

```
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const foodsStore =  createSlice({
    name:'foods',
    initialState:{
        foodsList:[]
    },
    reducers:{
        setFoodsList(state,action){
            state.foodsList = action.payload
        }
    }
})

const {setFoodsList } = foodsStore.actions

export const fetchFoodlist = ()=>{
    return async (dispacth)=>{
        const res = await axios.get('http://localhost:3004/takeaway')
        dispacth(setFoodsList(res.data))
    }
}

const reducer = foodsStore.reducer

export default reducer

```

在redux中注册这个模块

```
import foodsReducer from './modules/takeaway'
import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
    reducer:{
        foods:foodsReducer
    }
})

export default store
```

在index中注入模块

```
import React from 'react'
import { createRoot } from 'react-dom/client'

import App from './App'

// 注入store

import { Provider } from 'react-redux'
import store from './store'

const root = createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

```

最后在需要的地方引入即可

```
import NavBar from './components/NavBar'
import Menu from './components/Menu'
import Cart from './components/Cart'
import FoodsCategory from './components/FoodsCategory'

import './App.scss'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { fetchFoodlist } from './store/modules/takeaway'


const App = () => {
  // 触发 action 执行
  // 1.useDispatch -> dispatch 2.actionCreater 导入进来 3.useEffect
  const dispacth = useDispatch()
  useEffect(()=>{
    
    dispacth(fetchFoodlist())
 
  },[dispacth])

  const {foodsList} = useSelector(state=>state.foods)

  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu />

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map(item => {
                return (
                  <FoodsCategory
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  )
}

export default App

```



#### 点击分类的交叉实现

![image-20241027012536244](G:\react\react---mobile\assets\image-20241027012536244.png)

这里就比较简单直接存入一个状态然后直接去调用即可

定义

```
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const foodsStore =  createSlice({
    name:'foods',
    initialState:{
        foodsList:[]
    },
    activeIndex:0,
    reducers:{
        setFoodsList(state,action){
            state.foodsList = action.payload
        },
        changeActiveIndex(state,action){
            state.activeIndex = action.payload
        }

    },
})

const {setFoodsList,changeActiveIndex } = foodsStore.actions

const fetchFoodlist = ()=>{
    return async (dispacth)=>{
        const res = await axios.get('http://localhost:3004/takeaway')
        dispacth(setFoodsList(res.data))
    }
}

const reducer = foodsStore.reducer

export {fetchFoodlist,changeActiveIndex}
export default reducer

```

使用

```
import classNames from 'classnames'
import './index.scss'
import { useDispatch, useSelector } from 'react-redux'
import { changeActiveIndex } from '../../store/modules/takeaway'

const Menu = () => {
  const {foodsList,activeIndex} = useSelector(state=>state.foods)
  const dispacth = useDispatch()
  const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))
  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
            key={item.tag}
            onClick={()=>{dispacth(changeActiveIndex(index))}}
            className={classNames(
              'list-menu-item',
              activeIndex === index && 'active'
            )}
          >
            {item.name}
          </div>
        )
      })}
    </nav>
  )
}

export default Menu

```



#### 控制列表 条件渲染列表

![image-20241027013622504](G:\react\react---mobile\assets\image-20241027013622504.png)



```
import NavBar from './components/NavBar'
import Menu from './components/Menu'
import Cart from './components/Cart'
import FoodsCategory from './components/FoodsCategory'

import './App.scss'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { fetchFoodlist } from './store/modules/takeaway'


const App = () => {
  // 触发 action 执行
  // 1.useDispatch -> dispatch 2.actionCreater 导入进来 3.useEffect
  const dispacth = useDispatch()
  useEffect(()=>{
    
    dispacth(fetchFoodlist())
 
  },[dispacth])

  const {foodsList,activeIndex} = useSelector(state=>state.foods)

  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu />

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map((item,index) => {
                return (
                  activeIndex===index && <FoodsCategory
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  )
}

export default App

```



#### 添加购物车

![image-20241027013831572](G:\react\react---mobile\assets\image-20241027013831572.png)

![image-20241027013923631](G:\react\react---mobile\assets\image-20241027013923631.png)



这里使用redux修改存储状态即可



#### 购物车展示

![image-20241027020831697](G:\react\react---mobile\assets\image-20241027020831697.png)



![image-20241027020909256](G:\react\react---mobile\assets\image-20241027020909256.png)

#### 购物车列表展示

![image-20241027021222951](G:\react\react---mobile\assets\image-20241027021222951.png)

![image-20241027021437538](G:\react\react---mobile\assets\image-20241027021437538.png)

#### 购物车展示和隐藏

![image-20241027022046753](G:\react\react---mobile\assets\image-20241027022046753.png)

![image-20241027022109513](G:\react\react---mobile\assets\image-20241027022109513.png)

##### 备注对于redux

###### 在定义的时候 

可以通过createSlice 将state 和 同步修改状态封装在里面

但是异步状态智能封装在外面 

因为 reducer设计之初就是只改变状态不产生其他副作用（这里没有vue的action强）

```
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const foodsStore =  createSlice({
    name:'foods',
    initialState:{
        foodsList:[],
    },
    reducers:{
        setFoodsList(state,action){
            state.foodsList = action.payload
        },
    },
})

const {setFoodsList } = foodsStore.actions

const fetchFoodlist = ()=>{
    return async (dispacth)=>{
        const res = await axios.get('http://localhost:3004/takeaway')
        dispacth(setFoodsList(res.data))
    }
}

const reducer = foodsStore.reducer

export {fetchFoodlist}
export default reducer

```



###### 引用的时候

这里状态引用可以使用 useSelect 将state状态解构出来  

但是其他的同步函数，和异步函数 需要手动import 出来 然后再使用 useDisoatch()返回的dispatch调用才可以（建议将dispatch和import封装在一起，方便调用）



```
import { changeActiveIndex } from '../../store/modules/takeaway'


const {foodsList} = useSelector(state=>state.foods)
const dispacth = useDispatch()


...onClick={()=>{dispacth(changeActiveIndex(index))}}

```



## React-router

### 基础使用

![image-20241027022200536](G:\react\react---mobile\assets\image-20241027022200536.png)

![image-20241027022222430](G:\react\react---mobile\assets\image-20241027022222430.png)

![image-20241027022402577](G:\react\react---mobile\assets\image-20241027022402577.png)

```
import React from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter,RouterProvider } from 'react-router-dom'


// 定义Router
const router = createBrowserRouter([
  {
    path:"/",
    element:<div>Hello WOrld</div>
  },
  {
    path:"/app",
    element:<div>Hello app</div>
  },
])

const root = createRoot(document.getElementById('root'))
root.render(
  <Provider >
    <RouterProvider router={router}/>
  </Provider>
)

```



### 封装一下

![image-20241027023506978](G:\react\react---mobile\assets\image-20241027023506978.png)

![image-20241027023650801](G:\react\react---mobile\assets\image-20241027023650801.png)

### 路由导航

![image-20241027023852641](G:\react\react---mobile\assets\image-20241027023852641.png)

#### 声明式导航



![image-20241027023908913](G:\react\react---mobile\assets\image-20241027023908913.png)

![image-20241027024024714](G:\react\react---mobile\assets\image-20241027024024714.png)

#### 编程式导航

![image-20241027024145952](G:\react\react---mobile\assets\image-20241027024145952.png)

![image-20241027024250149](G:\react\react---mobile\assets\image-20241027024250149.png)

### 路由传参

![image-20241027024515770](G:\react\react---mobile\assets\image-20241027024515770.png)

![image-20241027025620538](G:\react\react---mobile\assets\image-20241027025620538.png)

![image-20241027030152998](G:\react\react---mobile\assets\image-20241027030152998.png)

![image-20241027030211844](G:\react\react---mobile\assets\image-20241027030211844.png)

### 嵌套路由

![image-20241027031144566](G:\react\react---mobile\assets\image-20241027031144566.png)

![image-20241027031223469](G:\react\react---mobile\assets\image-20241027031223469.png)

<Outlet /> 为子路由渲染出口

### 默认路由

![image-20241027033107372](G:\react\react---mobile\assets\image-20241027033107372.png)

### 404

![image-20241027033826960](G:\react\react---mobile\assets\image-20241027033826960.png)



### 两种路由模式

![image-20241027035011101](G:\react\react---mobile\assets\image-20241027035011101.png)

createHashRouter 就是有井号的那个 /#/



### 实战

![](G:\react\react---mobile\assets\image-20241027035727057.png)

![image-20241027040655716](G:\react\react---mobile\assets\image-20241027040655716.png)



#### 路径配置

![image-20241027041017187](G:\react\react---mobile\assets\image-20241027041017187.png)

![image-20241027041051242](G:\react\react---mobile\assets\image-20241027041051242.png)

![image-20241027041406224](G:\react\react---mobile\assets\image-20241027041406224.png)

#### mock

![image-20241027042420201](G:\react\react---mobile\assets\image-20241027042420201.png)

![image-20241027042436635](G:\react\react---mobile\assets\image-20241027042436635.png)

![image-20241027042601282](G:\react\react---mobile\assets\image-20241027042601282.png)







#### 初始化

![image-20241027044928893](G:\react\react---mobile\assets\image-20241027044928893.png)

![image-20241027045100540](G:\react\react---mobile\assets\image-20241027045100540.png)

![image-20241027045152688](G:\react\react---mobile\assets\image-20241027045152688.png)

![image-20241027045218659](G:\react\react---mobile\assets\image-20241027045218659.png)

![image-20241027142803442](G:\react\react---mobile\assets\image-20241027142803442.png)

![image-20241027142856737](G:\react\react---mobile\assets\image-20241027142856737.png)

![image-20241027142928000](G:\react\react---mobile\assets\image-20241027142928000.png)

![image-20241027143011664](G:\react\react---mobile\assets\image-20241027143011664.png)

![image-20241027143056554](G:\react\react---mobile\assets\image-20241027143056554.png)

![image-20241027143142266](G:\react\react---mobile\assets\image-20241027143142266.png)

![image-20241027143244437](G:\react\react---mobile\assets\image-20241027143244437.png)

![image-20241027143320561](G:\react\react---mobile\assets\image-20241027143320561.png)

![image-20241027143219372](G:\react\react---mobile\assets\image-20241027143219372.png)

![image-20241027143402465](G:\react\react---mobile\assets\image-20241027143402465.png)

![image-20241027143452850](G:\react\react---mobile\assets\image-20241027143452850.png)

![image-20241027143516747](G:\react\react---mobile\assets\image-20241027143516747.png)

navigate 重定向组件

![image-20241027143838464](G:\react\react---mobile\assets\image-20241027143838464.png)

![image-20241027144120273](G:\react\react---mobile\assets\image-20241027144120273.png)

![image-20241027144223372](G:\react\react---mobile\assets\image-20241027144223372.png)

![image-20241027170752311](G:\react\react---mobile\assets\image-20241027170752311.png)

![image-20241027170901402](G:\react\react---mobile\assets\image-20241027170901402.png)

![image-20241027171018302](G:\react\react---mobile\assets\image-20241027171018302.png)

![image-20241027171109256](G:\react\react---mobile\assets\image-20241027171109256.png)



![image-20241027171147686](G:\react\react---mobile\assets\image-20241027171147686.png)

懒加载

![image-20241027171310394](G:\react\react---mobile\assets\image-20241027171310394.png)

![image-20241027171348118](G:\react\react---mobile\assets\image-20241027171348118.png)

![image-20241027171452973](G:\react\react---mobile\assets\image-20241027171452973.png)

![image-20241027171512376](G:\react\react---mobile\assets\image-20241027171512376.png)

![image-20241027171706772](G:\react\react---mobile\assets\image-20241027171706772.png)

不打包资源 直接从最近的服务器获取即可 然后直接在index中  script引入

![image-20241027172007435](G:\react\react---mobile\assets\image-20241027172007435.png)



## 待定

## useReducer

![image-20241027172159053](G:\react\react---mobile\assets\image-20241027172159053.png)

![image-20241027172225125](G:\react\react---mobile\assets\image-20241027172225125.png)

![image-20241027172356975](G:\react\react---mobile\assets\image-20241027172356975.png)

![image-20241027172412688](G:\react\react---mobile\assets\image-20241027172412688.png)



## 

## useMemo

缓存计算结果 只有特定的状态变了才重新执行函数

![image-20241027173835465](G:\react\react---mobile\assets\image-20241027173835465.png)

![image-20241027172511265](G:\react\react---mobile\assets\image-20241027172511265.png)

![image-20241027172536245](G:\react\react---mobile\assets\image-20241027172536245.png)

![image-20241027172731636](G:\react\react---mobile\assets\image-20241027172731636.png)

![image-20241028230937494](C:\Users\86198\Desktop\image-20241028230937494.png)

## React.memo

### 基础使用

![image-20241027173858423](G:\react\react---mobile\assets\image-20241027173858423.png)

![image-20241027173948068](G:\react\react---mobile\assets\image-20241027173948068.png)

![image-20241027174021754](G:\react\react---mobile\assets\image-20241027174021754.png)

原来的每次执行count 都会重新渲染son组件

现在需要将其用memo将其包裹起来

![image-20241027174129774](G:\react\react---mobile\assets\image-20241027174129774.png)

![image-20241027174213774](G:\react\react---mobile\assets\image-20241027174213774.png)



### 机制

![image-20241027174301414](G:\react\react---mobile\assets\image-20241027174301414.png)

浅拷贝比较

注意当处于引用状态的时候 父组件的每次渲染都会让引用地址发生变化  也就是缓存不了

![image-20241027174624811](G:\react\react---mobile\assets\image-20241027174624811.png)

![image-20241027174436571](G:\react\react---mobile\assets\image-20241027174436571.png)



这里的处理方式事直接缓存一下这个数据 通过useMemu

![image-20241027174728416](G:\react\react---mobile\assets\image-20241027174728416.png)

## useCallback

![image-20241027180345151](G:\react\react---mobile\assets\image-20241027180345151.png)

![image-20241027181438298](G:\react\react---mobile\assets\image-20241027181438298.png)



## forwardRef

![image-20241027182516544](G:\react\react---mobile\assets\image-20241027182516544.png)

![image-20241027182547898](G:\react\react---mobile\assets\image-20241027182547898.png)

![image-20241027182627567](G:\react\react---mobile\assets\image-20241027182627567.png)

## useInpetactiveHandle

![image-20241027185139343](G:\react\react---mobile\assets\image-20241027185139343.png)

![image-20241027185234583](G:\react\react---mobile\assets\image-20241027185234583.png)

![image-20241027185412643](G:\react\react---mobile\assets\image-20241027185412643.png)

![image-20241027185439404](G:\react\react---mobile\assets\image-20241027185439404.png)

![image-20241027190613238](G:\react\react---mobile\assets\image-20241027190613238.png)





# 了解类组件（用来维护老项目）

## 类组件



![image-20241027191342655](G:\react\react---mobile\assets\image-20241027191342655.png)

![image-20241027191538041](G:\react\react---mobile\assets\image-20241027191538041.png)

![image-20241027191551938](G:\react\react---mobile\assets\image-20241027191551938.png)



## 类组件生命周期

![image-20241027191727744](G:\react\react---mobile\assets\image-20241027191727744.png)

![image-20241027191911813](G:\react\react---mobile\assets\image-20241027191911813.png)

## 父子组件通信

![image-20241027192011348](G:\react\react---mobile\assets\image-20241027192011348.png)

![image-20241027192049864](G:\react\react---mobile\assets\image-20241027192049864.png)

![image-20241027192128193](G:\react\react---mobile\assets\image-20241027192128193.png)

![image-20241027192227090](G:\react\react---mobile\assets\image-20241027192227090.png)

![image-20241027192311577](G:\react\react---mobile\assets\image-20241027192311577.png)



# Zustand

## 同步状态

![image-20241027192421032](G:\react\react---mobile\assets\image-20241027192421032.png)

![image-20241027192528006](G:\react\react---mobile\assets\image-20241027192528006.png)

![image-20241027192757740](G:\react\react---mobile\assets\image-20241027192757740.png)

​	

![image-20241027192903677](G:\react\react---mobile\assets\image-20241027192903677.png)



## 异步状态

![image-20241027193028130](G:\react\react---mobile\assets\image-20241027193028130.png)

![image-20241027193205907](G:\react\react---mobile\assets\image-20241027193205907.png)

## 模块化

![image-20241027194940454](G:\react\react---mobile\assets\image-20241027194940454.png)

![image-20241027195042854](G:\react\react---mobile\assets\image-20241027195042854.png)

![image-20241027195108092](G:\react\react---mobile\assets\image-20241027195108092.png)



# React 和  Ts

![image-20241027195229215](G:\react\react---mobile\assets\image-20241027195229215.png)

![image-20241027195310559](G:\react\react---mobile\assets\image-20241027195310559.png)

![image-20241027195351002](G:\react\react---mobile\assets\image-20241027195351002.png)



## useState 和 TS

![image-20241027195517572](G:\react\react---mobile\assets\image-20241027195517572.png)

![image-20241027195827030](G:\react\react---mobile\assets\image-20241027195827030.png)



## 泛型

![image-20241027195915697](G:\react\react---mobile\assets\image-20241027195915697.png)

![image-20241027200131819](G:\react\react---mobile\assets\image-20241027200131819.png)

## 空值

![image-20241027200300675](G:\react\react---mobile\assets\image-20241027200300675.png)

![image-20241027200735020](G:\react\react---mobile\assets\image-20241027200735020.png)

## props 与 TS

![image-20241027200750752](G:\react\react---mobile\assets\image-20241027200750752.png)

![image-20241027200827419](G:\react\react---mobile\assets\image-20241027200827419.png)

## props 与 ts 中children

![image-20241027200947018](G:\react\react---mobile\assets\image-20241027200947018.png)





## props 与 函数

![image-20241027201203402](G:\react\react---mobile\assets\image-20241027201203402.png)



## useRef 与 ts

![image-20241027201347022](G:\react\react---mobile\assets\image-20241027201347022.png)

![image-20241027201438391](G:\react\react---mobile\assets\image-20241027201438391.png)



# error lens

一款好用的插件 可以给代码一些错误提示

![image-20241027195741787](G:\react\react---mobile\assets\image-20241027195741787.png)





# 实战

![image-20241027201628607](G:\react\react---mobile\assets\image-20241027201628607.png)

![image-20241027201701264](G:\react\react---mobile\assets\image-20241027201701264.png)

![image-20241027201747531](G:\react\react---mobile\assets\image-20241027201747531.png)

![image-20241027201906587](G:\react\react---mobile\assets\image-20241027201906587.png)

![image-20241027201922071](G:\react\react---mobile\assets\image-20241027201922071.png)

![image-20241027202000207](G:\react\react---mobile\assets\image-20241027202000207.png)

![image-20241027202040099](G:\react\react---mobile\assets\image-20241027202040099.png)

![image-20241027202116588](G:\react\react---mobile\assets\image-20241027202116588.png)

![image-20241027202153910](G:\react\react---mobile\assets\image-20241027202153910.png)

![image-20241027202222457](G:\react\react---mobile\assets\image-20241027202222457.png)

![image-20241027202257958](G:\react\react---mobile\assets\image-20241027202257958.png)

![image-20241027202431355](G:\react\react---mobile\assets\image-20241027202431355.png)

![image-20241027202617249](G:\react\react---mobile\assets\image-20241027202617249.png)

在使用的时候会有类型推断



![image-20241027202716471](G:\react\react---mobile\assets\image-20241027202716471.png)

![image-20241027202731038](G:\react\react---mobile\assets\image-20241027202731038.png)



## 逻辑和视图的分离

![image-20241027202827007](G:\react\react---mobile\assets\image-20241027202827007.png)

![image-20241027202904851](G:\react\react---mobile\assets\image-20241027202904851.png)

![image-20241027202921907](G:\react\react---mobile\assets\image-20241027202921907.png)









![image-20241027203025064](G:\react\react---mobile\assets\image-20241027203025064.png)

![image-20241027203135578](G:\react\react---mobile\assets\image-20241027203135578.png)

![image-20241027203332556](G:\react\react---mobile\assets\image-20241027203332556.png)

![image-20241027203725585](G:\react\react---mobile\assets\image-20241027203725585.png)

![image-20241027203746237](G:\react\react---mobile\assets\image-20241027203746237.png)

![image-20241027203823417](G:\react\react---mobile\assets\image-20241027203823417.png)

![image-20241027203939189](G:\react\react---mobile\assets\image-20241027203939189.png)

接口管理工具的生成ts代码

![image-20241027204304361](G:\react\react---mobile\assets\image-20241027204304361.png)