注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中
组件是什么
概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次
React组件
在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可
useState基础使用
useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）
React中获取DOM
使用useRef创建 ref 对象，并与 JSX 绑定
在DOM可用时，通过 inputRef.current 拿到 DOM 对象
理解组件通信
概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法
父子通信 父子通信 跨层通信
子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改
useEffect 的概念理解
useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）, 比如发送AJAX请求，更改DOM等等
useEffect — 清除副作用
在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用
ReactHooks使用规则
只能在组件中或者其他自定义Hook函数中调用
只能在组件的顶层调用，不能嵌套在 if、for、其他函数中
什么是Redux？
Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行
作用：通过集中管理的方式管理应用的状态
在React中使用redux，官方要求安装俩个其他插件 - Redux Toolkit 和 react-redux
Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
react-redux - 用来 链接 Redux 和 React组件 的中间件
pnpm i @reduxjs/toolkit react-redux
store目录结构设计
通常集中状态管理的部分都会单独创建一个单独的 `store` 目录
应用通常会有很多个子store模块，所以创建一个 `modules` 目录，在内部编写业务分类的子store
store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store
创建redux
1.创建切片 使用createSlice 创建切片 slice是切片的意思
2.使用configureStore组装仓库 configure是配置的意思
3.使用Provide注入全局
在React组件中使用store中的数据，需要用到一个 钩子函数 - useSelector，它的作用是把store中的数据映射到组件中
React组件修改store中的数据
React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，它的作用是生成提交action对象的dispatch函数
在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上
什么是前端路由
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染
安装
pnpm i react-router-dom
创建一个路由对象
createBrowserRouter history模式 需要后端支持
使用ReactProvide 进行全局注入
声明式导航
声明式导航是指通过在模版中通过 `<Link/> ` 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行
通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过
字符串拼接的方式拼接参数即可
编程式导航
编程式导航是指通过 `useNavigate` 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活
searchParams 传参
通过解构数组获取params 然后通过params.get（）进行获取
params 传参
通过直接获取对象params 然后通过.id获取数据
嵌套路由配置
使用 children 属性配置路由嵌套关系 配置默认路由则添加 index：true 然后不用配置path
使用 `<Outlet/>` 组件配置二级路由渲染位置
404路由
场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染
准备一个NotFound组件
在路由表数组的末尾，以*号作为路由path配置路由
俩种路由模式
各个主流框架的路由常用的路由模式有俩种，history模式和hash模式, ReactRouter分别由 createBrowerRouter 和createHashRouter 函数负责创建
