2024React实战复杂共享单车管理项目React18+hooks核心基础到企业级项目开发实战-----【附带源码+接口】
https://www.bilibili.com/video/BV1sZ421T7BC 1 2
React项目：开发初体验
版本稳定....新版特性ds zdjdgwdx
2013 18
2024
1.声明式编程
告诉“机器”你想要什么（what），让机器去做（how）
命令式找女朋友：1.加微信 2.聊天 3.吃饭逛街看电影 4.送花表白...
声明式编码：我要个女朋友（不用管过程，只看结果，30打印）
2.组件化开发
目前前端的一种流行趋势，将一个一个复杂的界面拆分成一个一个的小的组件首先要实现一个小目标
3.虚拟DOM虚拟DOM最先提出的是：不是vue提出来的，react最先提出来和使用的vue2.0 引入了虚拟DOM的概念
虚拟DOM：通过J5代码来描述一段HTML代码（虚拟DOM理解成一个大的JSON对象）原生的DOM节点属性和方法过于复杂，操作时候过于影响性能，所以使用object来描述页面中的HTML结构，以达到一个对性能的提升
Vue中的虚拟DOM是template，模板，模板经过编译以后最后形成了我们需要的虚拟DOMreact，没有template，react使用的是JSX对模板进行编译，最后产生虚拟DOM
4.单向数据流
vue不同的组件中，强制使用单向数据流
父组件可以向子组件传递数据，但是子组件不能直接修改父组件的状态双向数据绑定：
mvvm去实现的双向数据绑定，由3部分组成：view，viewmodel，model view和model不能直接通信的，需要通过viewmodel来进行通信react的单向数据流：数据的流向只能通过props由外层到内层，一层一层的传递MVVM最显著的特点是：双向绑定
react是没有提供一个v-model这样的指令来实现文本框的数据流双向绑定一单向数据流的，react没有vm对象，它有的是属性和状态，用属性和状态去映射视图
5.react可以手动实现双向数据绑定react不是MVVM，mvc=>v
crossorigin =>跨域错误的具体信息
两个依赖：
1.react 核心库
2.react-dom 核心功能是将虚拟DOM渲染成真实DOM
以前没有（2015年以前）没有react-dom
reacti-native =>mobile
react 只包含了web和mobile的通用的核心部分
负责DOM操作的分到了react-dom
mobile => reacti-native
1.React.createElement（type，[props]，[...]）
React.createElement（）根据指定的第一个参数创建一个React元素type:html标签的名称 ul li
2.jsx语法
是JS语法扩展，可以使我们以类似HTML的形式去使用3S jsx代码最终都会转换以调用React.createElement（）元素jsx最终需要转换成J5代码，浏览器是不能识别jsx，babel=>编译器babel将ES6及以上的J5代码转换成为es5，让更多的浏览器支持react中，babel将jsx React.createElement（）创建元素的代码
4.react中的this指向1.this指向：谁调用指向谁
2.箭头函数不绑定this，箭头函数的this指向父级本质问题：不是React所导致的，这是JS本来就有的问题。
react中的事件名，就是一个中间变量，真正调用的时候并不this.changTxt（）
真正调用onClick
3.类组件中，jsx的this也是没有默认绑定，需要bind去绑定
4.类的方法不会绑定this的
public class fields语法
5.修改数据
通过state定义的数据，必须通过setState去修改数据setState会触发render（）
通过state定义数据，setState去修改数据，react组织代码的基本流程
React项目：JSX语法
React项目：React脚手架
组件开发
1.组件开发的思想
在实际的开发中，我们可以将一个完整的页面进行拆分，拆分成很多个组件，每个组件都用于实现页面的一个功能块，我们尽可能的将我们页面拆分成一个小的，可复用的组件。
react中的组件相对于vue，更加的灵活和多样。按照不同的方式，可以分成很多种的组件根据组件的定义方式：函数式组件，类组件
根据组件内部是否有状态，无状态组件，有状态组件 state根据组件的不同职责，展示型组件和容器型组件
最主要的关注的是：数据逻辑和UI展示的分离函数式组件、无状态组件、展示型组件主要关注的是UI类组件、有状态组件、容器型组件主要关注数据逻辑类组件
类组件的要求：
1.组件的名称是大写字母开头（函数式组件的名称也是大写开头）
2.类组件必须继承自React.Component
3.类组件必须实现render函数
4.constructor是可选的，我们通常在constructorzuo
函数式组件
function 定义组件
1.没有生命周期2.没有this
3.没有状态（state）hooks来解决
如果组件具有状态（state），我们可以使用class组件，否则使用函数式组件
组件的生命周期
事务从开始创建到销毁的整个过程=>生命周期女朋友=>老婆
女朋友=>陌路人
react中的组件，也有自己的生命周期，从创建到销毁，生命周期是一个比较抽象的概念，了解组件的生命周期最主要的目的是：让我们在合适的地方完成自己想要的功能
1.挂载阶段（mount）：组件第一次在DOM树中被渲染的过程
2.更新阶段（update）：组件状态发生变化，重新更新渲染的过程
3.卸载阶段（unmount）：组件从DOM树中被移除的过程
React项目：组件信
父子组件传值总结：
父传子：
1.父组件提供要传递的数据
2.给子组件标签添加属性，属性值为我们要传递的数据
3.子组件通过props接收父组件中传递的数据子传父：
思路：利用了回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
1.父组件提供一个函数（用于接收数据）
2.将这个函数作为属性的值，传递给子组件
3.子组件通过props调用父组件的函数
4.将子组件中的数据作为参数传递给父组件的函数
4.跨级组件
爷爷组件=>父组件=>孙子组件
1.单向数据流 完整概念是：数据的流向只能通过props由外层到内层一层一层的传递
单向数据流和双向数据绑定的区别：双向数据绑定单纯的就是数据与视图层之间的绑定
当我们的组件层次在3层以内我们可以采用props层层传递
2.context对象
context就相当于一个全局变量，
createContenxt rpovider consumer-child
eventBus mitt PubSub
import { EventEmitter } from 'events'
React项目：组件优化
shouldComponentUpdate 阀门 PureComponent
浅tЕ props和state进行浅比较（shallowEqual）来实现EshouldComponentupdate不会进行深层次的比较，只比较外层数据结构，只要外层相同，则认为没有变化PureComponent存在的问题：
1.函数式组件不可以用
2.由于页面进行的浅比较，可能由于深层数据的不一致导致而产生错误判断，从而导致页面的不更新
3.正是因为进行的浅比较，所以不合适在多层次的嵌套对象
组件优化：
我们要避免组件的重复渲染，可以手动shouldComponentUpdate生命周期函数，会在组件的重新渲染之前调用，根据这个函数返回的bool值来决定是否重新渲染组件，如果true手动调shouldComponentUpdate，pureComponent（）
2.key的重要性
虚拟DOM的标识，key不是给我们用的，是给react/vue用的
3.1 setState是同步的还是异步的react18之前：
1.在合成事件中是异步的，在生命周期钩子中是异步的
2.在原生事件、在定时器中，是同步的合成事件：就是React内部自己实现了一套事件处理机制，不是原生的事件
数据不同步 多次render
3.1 setState是同步的还是异步的react18之前：
1.在合成事件中是异步的，在生命周期钩子中是异步的
2.react17 在原生事件、在定时器中，是同步的合成事件：就是React内部自己实现了一套事件处理机制，不是原生的事件同步更新：每更新state就执行一次render（同步）
全部更新完毕以后执行一次render（异步）
批量更新，React将多次state更新进行合并处理，最终只进行一次渲染手动批量更新
react18 自动批量更新
React项目：受控组件与高阶组件
在vue，react 页面元素都是动态生成的，无法使用DOM API我们在React中，大部分操作的都是React元素，不是DOM元素，通常情况下，我们不需要，也不建议，直接操作原生的DOM元素。
ref属性，用于访问在render方法中创建的React元素，就是获取DOM进行操作谨慎使用Ref，能够使用属性和状态进行控制，就不要使用Ref React里边，思维方式：不要强制去修改DOM，而是通过props，state 重新渲染组件Ref转发，
2.受控组件和非受控组件
受控组件和非受控组件指的都是表单元素
受控组件，受React控制，表单的状态（数据）修改只能通过setState（）来更新
特点是：数据可控，完全由react中的state来管理非受控组件：
使用Ref从DOM节点获取表单数据，表单数据交由DOM节点来处理特点是：ref获取DOM节点进行数据更新，这样就不可控了，不能统一进行管理
3.高阶组件
高阶函数：一个函数就可以接收另外一个函数作为参数
1.接收一个或者多个函数作为输入
2.输出一个函数
高阶组件就是一个函数，这个函数接收一个组件作为参数，并返回一个新的组件高阶组件就是通过props把account传递给目标组件了，目标组件就直接从props里边拿数据就可以了
高阶组件（HOC highOrderComponent）
高阶组件（HOC highOrderComponent）是react中用于复用组件的逻辑的一种技巧，HOC不是react api的一部分，它是一种基于React的组合特性而形成的设计模式高阶组件就是参数是组件，返回值为新组件的，高阶组件就是一个函数
function A(Bcomponents){return class extends Component{render(){return <B>}}
}
当不同的组件需用使用相同的功能的时候，不同组件中肯定会出现重复的代码，高阶组件解决的是功能的复用，不是代码的复用高阶组件的主要功能是封装并分离组件的通用逻辑，让通用的逻辑在组件间更好的复用minxins：React中，推崇的是组合，不推崇继承
minxin相互依赖，相互耦合，不利于代码的维护minxin命名冲突
minxin非常多的时候，维护起来就很头疼
HOC需要在原来的组件上进行包裹或者嵌套，如果大量的使用HOC，将会产生非常多的嵌套，调试就很困难，HOC可以劫持props，
相当mixin
React项目：hooks1
Hooks React的核心是组件，v16.8之前，组件的标准写法是class（类组件）
类组件=>累ctrl+k函数式组件存在的问题：
1.必须是纯函数（？）
2.不能包含状态（state）
3.不支持生命周期
函数式编程：
纯函数：就是一个函数，一个函数的返回结果只依赖自己的参数，并且执行的过程中没有副作用副作用：
函数式组件只能做UI展示，涉及到状态的管理，就必须使用类组件没了解决函数式组件存在的问题，类组件功能齐全，但是代码很重，纯函数组件很轻便却有很多限制，react 团队设计了react hooks组件尽量写写成纯函数，如果需要外部的数据或者是功能，就准备一把钩子，把涉及到数据或者是功能的代码钩进纯函数组件里边
hooks=>钩子
useState
1.useState它的作用就是声明状态变量useState 注意点：
1.初始参数只在组件的首次渲染的时候使用，再次更新是会被忽略
2.每次通过setXxx修改状态都会引起组件重新渲染
3.useState可以调用多次，每次都是独立的
4.useState只可以在函数组件之内使用，
5.如果初始值需要计算才能得到，可以使用回调函数的形式来确定初始值
2.useEffect 可以为react组件完成副作用的操作react中，一个纯函数式组件主要的功能是通过数据渲染UI，剩余的其他的操作都是副作用
1.ajax请求
2.手动DOM
3.本地存储
useEffect 可以多次用
useEffect是在react更新DOM之后运行一些额外的代码，也就是执行副作用操作
依赖项执行时机：
1.默认状态：首次执行+每次组件更新都执行 useEffect（）函数2.添加了一个空的：[]首次渲染的时候执行，执行一次useEffect（）函数
3.添加特定的依赖项的：首次执行+依赖项发生更新的时候执行useEffect
（）函数
creteConetxt
useContent 祖顺锤子 父provider
useContext帮助我们跨组件直接通信
使用步骤：
1.使用creatContext创建context对象
2.在顶层组件通过Provider提供数据3，底层组件通过useContext（context）函数去获取数据
useRef
useRef主要功能是帮助我们获取DOM元素或者组件，还可以保存值
1.引入useRef，调用useRef（）
2.通过ref属性将useRef的返回值绑定到元素身上
3.useRef（）返回的是一个对象，对象内有一个current属性
useReducer useReducer是一个高级Hook，（useState，useEffect，useRef必须的hook）
useState是提供组件状态的，useReducer是useState升级版，所有的useState规则，useReducer都适用
useReducer的使用步骤：
1.定义一个initState
2.定义一个reducerh函数，把所有的操作方法都放到这个函数里边3.把initState跟reducer，通过的是useReducer关联起来，返回一个当前的state 和dispatch
4.当需要计算的时候，使用dispatch传递一个action值，触发的reducer函数，返回一个新的state
useCallback解决的是重复渲染的问题，就是性能优化相关 缓存函数
memo 缓存组件 相当 purecomponet
useMemo 缓存状态 计算属性
React项目：hooks2
React项目：组件相关知识补充
1.useMemo父组件渲染，会生成一个新的对象，导致传递给子组件的person属性发生了变一化，进而会导致子组件重新渲染，浅比较
使用useMemo包裹一下
2.高阶组件使用场景
高阶组件就是一个函数，这个函数接收一个组件作为参数，并且返回一个新的组件
HOC
（
5.fragment定义组件的时候，最外层的div不想被渲染的时候，可以使用
6.StrictMode严格模式，检查项目中潜在的问题的一个工具
7.函数式组件的类型检查
8.style样式处理
1.内联样式2.普通样式
3.sass，less create-react-app脚手架是默认支持sass下载安装
React项目：首页布局的基本实现（项目1）
hello单车管理后台
1.andt的兼容性
@4.0之后不支持IE9/10 IE11（Polyfiles）
Polyfiles主要作用是解决兼容性问题
2.支持服务端渲染（ssr）
3.支持electron js，html，css 桌面级应用
antd的J5代码默认支持ES MODULE的=> tree shaking tree shaking 指的当引入一个模块的时候，一个模块还会依赖另外一个模块，
antd的J5代码默认支持ES MODULE的=> tree shaking tree shaking 指的当引入一个模块的时候，一个模块还会依赖另外一个模块，不引入这个模块的所有代码，之引入我们需要的代码tree shaking的本质：消除没有用的jsd代码编译器判断出某些代码根本不影响输出=>消除这些代码DCE（dead code elimination）
webpack中，有一个入口文件，相当于一棵树的主干，入口文件会依赖很多的模块，这些模块相当于树枝，虽然说依赖了某个某块，但是只是使用了其中的某些功能，
webpack识别less create-react-app 修改webpack的配置，yarn eject yarn eject => npm run eject =>都是不可逆的配置暴露出来以后，=>react-scripts思考：如何不暴露出webpack的配置，来实现修改create-react-app的配置craco：一个对 create-react-app 进行自定义配置的社区解决方案craco的使用步骤：
1.安装依赖
new ant cssinjs
React项目：axios组件的封装（项目2）
pracess对象是node 全局变量env是proces的属性，这个属性返回的是用户环境的信息MODE_ENV craco start set MODE_ENV=development windows setmac =>linux yarn add-D cross-env 跨平台设置mode_env参数
React项目：路由实战1
1.后端路由
路由其实就是一个函数，URL=>函数的一个映射后端路由占据主导地位，用户通过URL访问到页面的时候，后端路由去匹配之后再返回给浏览器，服务器响应请求，在服务端拼接好HTML页面，返回给前端模板技术
每次切换的时候，浏览器都会刷新页面
后端路由：当前端去改变URL的时候，浏览器会向服务器发送请求，服务器根据这个url，返回不同的资源内容特点：
1.前端每次跳转到不同的URL地址的时候，都会重新返回服务器
2.服务器根据前端的路由，返回不同的数据，或者是HTML页面
2.前端路由
前端路由时后来发展了SPA（单页应用）时才出现的概念前端路由有两种模式：
1.hash模式，带有hash的前端路由，优点时兼容性高，缺点是URL会带有#号
2.history：不带#的前端路由，缺点是：需要浏览器支持以外，还要后端服务器支持
前端路由是在跳转路由的时候，不向服务器发起请求，而是在浏览器端进行处理，通过不同的URL映射到页面不同的DOM元素，不同URL的显示的不L同的页面内容
核心：改变URL，引起U1的更新，但是页面不进行整体刷新（很多资源不1需要重新请求）
yarn add-D react-router
react-router 不是下载react-router react-native yarn add-D react-router-dom
2.HashRouter，BrowserRouter是一个组件BrowserRouter使用history模式，HashRouter使用的是hash模式前端路由描述的是：URL与UI之间的映射关系，建立映射关系URL=>Home
3.Routes组件
Routes组件包裹所有的Route，Route去匹配路由。
Routes替换掉了v5的Switch组件Route组件必须使用Routes嵌套包裹
path属性：设置匹配的路径
elment属性：匹配完了以后渲染的组件，v5 使用的component v5：exact属性：精准匹配 v6不再支持
Navigage标签
动态路由
配置路由 routes index:true
Route标签配置 route-path/x/x 子
link navlink
routout outlet 子路由
useNavigate()
redirect:v5
navigate：v6
navigate用于路由的重定向，当这个组件出现的时候，就会跳转到对应的路径中
1.页面重定向
2./的重定向
React项目：路由实战2
class this.props.routernavigate
3.建立路由的映射关系
手动跳转
函数式组件实现的手动跳转，类组件要实现手动跳转HOC=>高阶组件=>函数接收一个组件作为参数并且返回一个新的组件
4.参数传递
前端路由一般的话，携带参数，传递给后台，后台拿到参数做什么用idpl
1
useSearchParams() + query
useLocation() state...+param
React项目：项目实战（按钮、对话框、loading）
React项目：项目实战（消息框、标签页、画廊、轮播图）
1.notification（通知提醒）使用场景：
1.复杂的内容通知
2.带有角户的通知，给出用户的下一步提示
3.系统主动推送
2.message使用场景
通常是对某个操作动作的执行结果的反馈，告诉我们要怎么去做
React项目：项目实战（表单表格）
React项目：高级表格富文本f
1.富文本
有格式的文本，可以去加图片，加超链接，所见即所得rtf格式：富文本格式，或者又叫做多文本格式纯文本，没有任何文本修饰的，只保存文本不保存格式设置html也是纯文本
d
yarn add -D react-draft-wysiwyg
yarn add -D draftjs-to-html
draft-js react富文本的编辑器框架
draft-js 提供的convertToRaw用于把不可变的数据转换为js对象
draftToHtm2将呢你容转换为html
注意安全...
React项目：城市管理，redux基础
useImperativeHandle:Hooks useRef：返回一个ref对象，操作DOM，将ref绑定到某子组件标签上，用以获取整个子组件的方法和参数
ref：命令式代码，官方不推荐使用命令式代码
useImperativeHandle：可以让你在使用ref的时候不是全盘接收子组件的方法和属性，自定义暴露给父组件的实例值，需要配合forwardRef使用，forwardRef将ref 从父组件转发到子组件中的DOM
useImperativeHandle：可以让你在使用ref的时候不是全盘接收子组件的方法和属性，自定义暴露给父组件的实例值，需要配合forwardRef使用，forwardRef将ref 从父组件转发到子组件中的DOM元素上什么是状态：react中，state就是状态1.state是不是随时变化的，状态之间存在着依赖关系，一个状态的改变就会引起另一个状态的变化，页面也会引起状态的变化，应用非常复杂的时候，state在什么时候，因为什么原因发生了变化，发生了怎么样的变化，导致state非常的难以控制和追踪
2.react是在视图层帮助我们解决DOM的渲染过程，state是留给我们自己来管理的，react其实主要的负责帮助我们管理视图，state维护最终还是靠我们自己来决定
react中管理状态：redux vue3 vuex pinia redux是js的状态容器，提供了可预测的状态管理，可以理解为：全局数据的状态管理，用来做组件通信
容器给人的第一感觉就是装
js的状态容器就是装状态（state）的容器
redux的核心理念
1.store：就是一个仓库，仓库里边存储数据，它可以获取数据，也可以派发数据，还能监听数据的变化
2.action：动作，它的值一般是一个对象 格式{type：data:''}，type 是必须要有的3.reducer:reducer是初始化以及处理派发的action的纯函数redux的基本使用：
1.安装
yarn add-D redux
2.基本使用流程
创建一个对象，作为状态state创建store来存储state，创建store时，必须创建reducer，通过store.getState（）来获取当前的state通过action来修改state，通过dispatch来派发action，通常action会有type属性，也可以携带其他的数据
reducer中的对应代码，reducer是一个纯函数，不能直接去修改state可以在派发action之前，监听store的变化
yarn add-D redux yarn add-D react-redux react-redux：是redux官方的react绑定库，它能够react组件从redux store去读取数据，并且向store去分发action|
通过action来修改state，通过dispatch来派发action，通常action会有type属性，也可以携带其他的数据
reducer中的对应代码，reducer是一个纯函数，不能直接去修改state可以在派发action之前，监听store的变化
yarn add-D redux yarn add-D react-redux react-redux：是redux官方的react绑定库，它能够react组件从redux store去读取数据，并且向store去分发action 更新数据pnpm（硬软件、软连接）redux的三大原则：
1.单一数据原则
2.state是只读的，唯一修改state的方法是：触发action
3.使用纯函数来执行修改
React项目：redux,rtk
1.3 可预测
唯一修改state的方法一定是触发action，不能直接去修改state外部对state的操作都被容器所限制，对state的操作都在容器的掌握中，这就是所谓的可预测
state\useReducer\context =>处理简单的数据都没有问题，如果是复杂的数据结构，就无法使用state\useReducer\context rudex可以理解为：reducer和context的一个结合体，使用redux可以管理复杂的state，可以在不同的组件之间共享传递state，rudex主要的使用场景依然是大型应用
react-redux是react的绑定库，不是redux内置的，需要单独的安装，react-
redux其实就是一个redux专门用来匹配react应用的组件存在的问题：
1.如果state过于复杂，将会变得非常的难以维护，如果是多个state我们可以采取分组的形式，创建多个reducer，然后合并成一个reducer
2.state每次操作的时候，都需要对state进行拷贝，要返回一个新的state，之后再去修改
3.case维护比较麻烦。（起名麻烦，容易传错，多个reducer容易重名）
2.RTK redux toolkit，redux的工具包，简称RTK，RTK是一种使用rudux的一种方式，RTK有效的帮助我们处理使用redux中重复性的工作，简化redux的操作
yarn add-D react-redux@reduxjs/toolkit实际开发中，状态来自于接口，网络请求的
React项目：异步action,redux-thunk,跨域
同步修改数据，开发中，我们的数据一般是来自于接口，网络请求，异步操作同步：等（从上到下，按顺序执行，遇到比较耗时的操作，比如说网络请求，比如10，就会导致程序挂起等待，等待耗时的操作结束才会继续往下执行）异步：不用等（从上到下，遇到比较的耗时的操作，把这个耗时的操作放到任务队列，等主线程执行完毕以后，不会去等）RTK：这个东西还算是比较新的，项目里边还不定会用上，但是官方是推荐大家使用的RTK redux中之前是如何处理异步操作的
redux中之前是如何处理异步操作的redux-thunk：中间件
中间件就是一个函数，函数的主要作用：实现功能，扩展功能张三，暗恋一个姑娘，通过这个朋友与这个姑娘说上话了朋友=>中间件
帮助张三扩展实现了跟姑娘说话的功能redux：数据流=> 同步数据流
张三 讲话的内容（都要通过朋友去传递）姑娘异步数据：一个函数来实现这个功能（需要一个中间件来扩展实现这支持异步数据流的功能）
跨域的问题：
1.指的从一个域名去访问另外一个域名的资源，跨域名请求
2.浏览器的同源策略所限制，是浏览器的安全限制
3.协议、域名、端口有任何不一致就是跨域
开发服务器
1.JSONP（JSON with Padding）是JSON的一种使用模式，原理是利用一些标签的属性不受同源策略的影响
2.cors（不是前端设置的，是后端设置的，所有的现代浏览器都支持这个功能，w3c的标准，CORS的主要的配置是服务器端配置，客户端不需要任何配置）
3.代理服务器
就是在本地通过nodejs启动一个服务，然后我们先请求的是nodejs的服务，d制
nodejs的服务代理我们去请求我们想要的跨域地址，服务端是不受同源策略限
dispatch如果传入的是对象，就是同步的action dispatch如果传入的是一个函数，就是异步的action redux-thunk
1.实际开发中，状态来自于接口=>网络请求=>异步的操作2.redux的数据是同步的数据流，本身是不支持异步的
3.中间件，中间就是一个函数，函数的作用的扩展功能，
3，中间件，中间就是一个函数，函数的作用的扩展功能，中间件去让redux支持异步数据流
4.redex-thunk
5，跨域的问题：src=>setupProxy.js（文件不能改名）
6，使用http-proxy-middleware（react脚手架自带）
yarn add-D http-proxy-middleware
7.自己搭建服务器 koa
8.RTK
React项目：rtk异步action，面包屑导航
官方推荐
createStore=>
yarn add-D react-redux@reduxjs/toolkit异步action，接口
传入对象是同步的action传入函数是异步action redux=> 中间件 => 是一个函数，扩展功能 => redux-thunk => dispacth可以进行异步操作。redux toolkit 已经集成了 thunk相关的功能creatAsyncThunk => rtk提供的API，这个api的作用是创建一个异步的action一般在前端当中，数据持久化，可以通过将数据存储到本地存储，用的时候直接从本地存储中获取数据
creatAsyncThunk => rtk提供的API，这个api的作用是创建一个异步的action一般在前端当中，数据持久化，可以通过将数据存储到本地存储，用的时候直接从本地存储中获取数据
yarn add-D redux-persist
创建了一个持久化的store
序列化：存储的时候=>是字节
对象=>转成字节（方便存储）
反序列化 字节=>对象（方便读写）
https://www.fastmock.site
React项目：订单管理、员工管理-共享单车管理后台
React项目：车辆地图模块
Ibsyun.baidu.com/index.php？title=jspopularGL/guide/helloworld T明
百度地图加入
1U
1.申请成为百度的的开发者，获取的密钥2.public/index.html中引入百度地图的api
3.react组件中，可以通过
const BMapGL = window.BMapGL
4.使用
创建地图实例，传入一个容器，容器要设置高度设置中心点坐标（经度和纬度）初始化地图，设置展示级别
添加控件
注册 密钥 应用key...
React项目：图表操作共享单车管理后台
echarts
React项目：权限设置
请求获取对应token 内容加权限 动态路由 路由拦截/diy守卫
