# react18

**Repository Path**: wzm_love_coding/react18

## Basic Information

- **Project Name**: react18
- **Description**: 这是 一个商城后台管理系统，技术栈：react18+redux+react-router+hooks+权限管理等功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-11
- **Last Updated**: 2023-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 创建项目 版本：18.2.0
```js
    npx create-react-app my-app
    cd my-app
    npm start
```
# 安装路由 
> cnpm i react-router-dom -S   版本：6.8.2

# 安装UI组件库
> cnpm i antd@4.22.6 --S

# 安装字体图标库
> cnpm install --save @ant-design/icons

# react 项目中引入scss 8.0.0
> cnpm install node-sass sass-loader --save

# 全屏
> cnpm install screenfull -S

# 集成redux
> cnpm i redux -S

> 对state进行深拷贝 cnpm i immer -S

> 在react组件中使用仓库中的状态 cnpm i react-redux -S

# 安装redux 日志redux-logger
> cnpm i redux-logger

# 安装antd国际化语言包
> cnpm i react-intl -S

# 在抽屉上面，实现颜色的拾色器，使用react-color这个依赖，安装之，如下：
> cnpm i react-color -S

# 对商品图片上传处理，找到一个带有裁剪功能的组件
> cnpm i antd-img-crop -S

# 安装axios
> cnpm i axios@0.27.2 -S

# 前端权限校验的流程：
* 点击登录，调用接口，获取token。token需要存储到redux中，还需要存储到localstorage中。
* 带个token，再去调用一个接口，获取用户信息，用户信息中包含角色（role）信息。也需要存储到redux中。
* 使用后端返回 的role和路由表，执行算法，得到当前登录用户有权访问的路由们（accessRoutes）。也是需要存储到redux中。
* 根据accessRoutes动态生成路由规则和Layout菜单。
* 跳到后面首页面/，接着重定向到/dashboard。

# 安装redux-thunk中间件
> cnpm i redux-thunk -S
> 在组件中发一个登录请求，实际上这个登录请求，需要在redux中发送，类似于vuex中action中发请求。在redux中，默认情况下，> 是不支持写异步代码的。在redux中要写异步代码，需要借助redux-thunk中间件

# 总结：
* redux中action分两类：同步action和异步action
* 同步action是一个对象：{type, payload}
* 异步action是一个函数，函数中可以写异步代码
* dispatch默认情况下只能派发一个同步的action
* dispatch要派发一个异步的action，需要使用redux-thunk中间件

# echarts和bizcharts
> echarts `cnpm install echarts --save` 不管是vue或react都可以使用，DOM图。
> bizcharts 只能在react中使用，里面是一堆的组件，用什么图，导入什么组件。非常简单。
> 要使用bizcharts，需要安装 `cnpm i bizcharts -S`

# 安装moment模块，处理发布时间
> `cnpm i moment -S`

# useEffect  
> https://zhuanlan.zhihu.com/p/65773322
> 在useEffect中，不仅会请求后端的数据，还会通过调用setData来更新本地的状态，这样会触发view的更新。
> 但是，运行这个程序的时候，会出现无限循环的情况。useEffect在组件mount时执行，但也会在组件更新时执行。因为我们在每次请> 求数据之后都会设置本地的状态，所以组件会更新，因此useEffect会再次执行，因此出现了无限循环的情况。
> 我们只想在组件mount时请求数据。我们可以传递一个空数组作为useEffect的第二个参数，
> 这样就能避免在组件更新执useEffect，只会在组件mount时执行。
> useEffect的第二个参数可用于定义其依赖的所有变量。如果其中一个变量发生变化，则useEffect会再次运行。如果包含变量的数> 组为空，则在更新组件时useEffect不会再执行，因为它不会监听任何变量的变更。
> 不能直接在useEffect中使用async函数因此，我们可以不直接调用async函数，而是像下面这样：
```js 
    useEffect(() => {
        const fetchData = async () => {
        const result = await axios(
            'http://localhost/api/v1/search?query=redux',
        );
        setData(result.data);
        };
        fetchData();
    }, []);
```


```js
    useEffect(() => {
        fetchGoodList(params).then(res => {
            console.log('===商品列表', res)
            if (res.list) {
                // react18 自动合并
                setList(res.list)
                setTotal(res.total)
            }
        })
    },[])
```

```js
    useLayoutEffect(() => {
        dispatch(getCates())
    },[])
```

# useDeferredValue
* useDeferredValue 是 React 18 中的一个新钩子，它可以用于处理组件树更新过程中的卡顿情况。
* 当组件树更新所需的工作量较大时，会导致交互过程卡顿，例如在输入框中输入内容时。这时可以使用 useDeferredValue 来解决。
* useDeferredValue 可以将一个状态值的更新操作延迟到下一次渲染时执行，从而减轻当前渲染的工作量，避免卡顿。
* useDeferredValue 返回一个包含两个元素的数组：一个是 deferredValue，表示延迟更新的状态值；另一个是 rehydrate，表示将延迟更新的状态值恢复为最新的值。
* useDeferredValue 的用法类似于 useState，只不过它返回的是延迟更新的状态值和恢复函数。
* useDeferredValue 可以与 useTransition 一起使用，以确保延迟更新不会影响交互响应速度。