一、react基础
1.进程
2、优势
封装成一个库，组件化开发更加方便
跨平台主要是react native等可以来写移动端如android，ios等
丰富生态：可以在很多浏览器用
3、市场
4、搭建脚手架
npx create-react-app react-basic
npm start后仍然可能会报错
解决办法，在index.js中把这两行注释掉
认识目录
核心依赖（右边两个react）
去除非必要
除了app.js和index.js其他全干掉
index.js
app.js
重新启动测试
npm start
运行原理：
总结
创建->清理
5、JSX
本质
工具编译测试
Babel · Babel，点击上面的try it out，然后勾选左边的react就可以了
也就是说，JSX是浏览器不认可的格式，需要通过babel编译器转换成js
高频场景
const count = 1000
function getName(){
return(
'john'
)
}
function App() {
return (
<div className="App">
this is my first react app
{'this is message'}
{count}
{getName()}
{new Date().getDate()}
<div style={{color:'red'}}>this is div</div>
</div>
);
}
解释：外面的括号（外层）是识别表达式，内层是对象结构
注意
渲染列表
总结
const list = [
{id:1001,name:'react'},
{id:1002,name:'angular'},
{id:1003,name:'vue'}
]
function App() {
return (
<div className="App">
<ul>
{list.map(item=><li key={item.id}>{item.name}</li>)}
</ul>
</div>
);
}
export default App;
条件渲染
简单情况
复杂情况
一个页面三种图片展示方式
事件绑定（交互）
获取事件参数e
自定义参数（要用函数引用）
两个都要
6、组件
所谓的组件其实就是函数，可以用function也可以用箭头函数声明，只要首字母是大写就可以。
7、useState
状态不可变
修改对象状态
拓展：看看官方文档数组要怎么变化
8、组件样式变化
1、行内样式
2、类名
9、B站评论案例
渲染
这堆要放在commentList的map循环里面
删除
思路是传一个id进去函数，然后用过滤器过滤掉id相等的那个人
切换功能
思路：先准备一个列表，遍历出最热和最新，设置一个动态state，点击就传type给函数，然后顺便修改这个state，高亮显示就是动态类名，判断这个state和遍历的item一不一样。
排序
安装lodash，主要用他的order功能
npm i lodash
引入横杠
解释：三个字段，第一个是列表，第二个是针对哪个type，第三个是排序方式
改进
让一开始进去就是按最热排序，有默认排序
修改前
修改后
10、classnames优化类名
图里面那种本质还是字符串拼接的模板字符串
安装包
npm i classnames
import
11、受控表单绑定
12、react中获取dom
可以用dir查看有哪些属性
13、发布评论
1、获取评论内容
2、点击发布触发回调函数
本质是修改commentList，先展开，后面再拓展进去（格式要一致），content改为动态的
3、优化
安装uuid
npm i uuid
用法
import {v4 as uuidv4} from 'uuid';
day.js
import dayjs from 'dayjs';
主要观察rpid，ctime
13、清空内容并聚焦案例
当发布完评论后就要这样
1、清空内容
2、聚焦
先创建ref实例，然后绑定到input，最后调用focus方法即可
调用current.focus()即可
14、组件通信
父传子
function Son(props){
return <div>this is son，{props.name}</div>
}
function App() {
const name = "this is father"
return (
<div className="App">
<Son name={name}></Son>
</div>
);
}
export default App;
props说明
这里修改会报错，因为props是只读属性
children说明
子传父
影响视图变化的是状态数据
兄弟组件通信
import {useState} from "react";
function A({onGetAMsg}){
const name = "this is A"
return (
<div>
我是A组件
<button onClick={()=>onGetAMsg(name)}>send</button>
</div>
)
}
function B({name}){
return(
<div>
我是B组件
{name}
</div>
)
}
function App() {
const [name,setName] = useState(null)
const getAMsg = (msg)=>{
setName(msg)
}
return (
<div className="App">
<A onGetAMsg={getAMsg}/>
<B name={name}/>
</div>
);
}
export default App;
跨层组件通信
15、useEffect
我们主要关注是否有请求并且只请求一次。
依赖项参数说明
第一种情况
事实也确实是这样，组件初始化和更新时都会执行一次
第二种情况
这里只执行一次
第三种情况
看起来和第一种情况差不多，实则不然，第一种情况不管什么组件更新都会执行一次，而这里只有count变化才执行一次。
清除副作用
import {useEffect, useState} from "react";
function Son(){
useEffect(() => {
const timer = setInterval(()=>{
console.log("定时器执行中")
},1000)
return () => {
clearInterval(timer)
}
}, []);
return <div>this is son</div>
}
function App() {
const [show, setShow] = useState(true)
return (
<div className="App">
{show && <Son/>}
<button onClick={()=>setShow(false)}>卸载Son组件</button>
</div>
);
}
export default App;
16、自定义hook函数
不封装直接实现
封装自定义Hook实现
抽象实现的通用逻辑
17、ReactHooks使用规则
第一种错误
第二种错误
18、优化B站评论
需求1
json-sever
npm i json-sever -D
根目录创建db.json
复制静态数据过来
pages.json添加serve
npm run serve启动
npm run serve
有笑脸就是成功
可以尝试请求这个地址
打开就是模拟get请求
axios
npm i axios
从后台获取数据
先初始化一个动态数组准备接收
先在useEffect里编写函数逻辑，再来调用函数
需求2
封装函数
把上一步编写的逻辑都放到hook函数里面
App组件调用
需求3
封装Item组件
去掉key
这里会报错，先把功能去掉
封装删除功能（子组件调用父组件 / 父传子）
父传子把功能传递下去（onDel那里）
接收一下
重新调用
至此，我们通过组件抽象的方式实现了小组件的封装
19、Redux
快速体验（计数器）
模版
最后一步
流程梳理
20、react-redux
配置基础环境
store目录结构设计
跟着创建目录先
21、用redux继续实现counter案例
整体路径熟悉
使用Reacttoolkit创建counterStore
使用中间件react-redux连接，为React注入store
下面是在根目录的index.js中操作的哦
react中使用store数据
useSelector
react中修改store数据
useDispatch
这里还要引入store里的actions对象，然后通过中间件的useDispatch提交
总结
22、提交action传参
需求
实现
完整代码
原理：跟action对象的payload有关
23、react-redux异步操作
需求理解：跟之前的没什么变化，只是多了异步修改
异步操作样板代码
实际代码，重新创建channelStore.js
导出reducer
24、redus调试-devtools
安装扩展程序
重启浏览器就可以
25、美团案例
1、点击左边列表，右边列表也会渲染
2、点击+号下面会有高亮显示
3、清除购物车
准备工作
分类和商品列表
启动项目
npm run start
npm run serve
创建store实例
异步获取
导出
modules的index.js引入
根目录的index.js引入
触发action并且渲染数据
用redux工具查看
渲染列表
点击分类激活交互实现
点击背景会变白
redux编写
解构出来并export出去
Menu组件的index.js引入方法和使用dispatch
redux工具调试查看
引入activeIndex
classNames编写
商品列表切换显示（视图控制）
App.js引入activeIndex
添加购物车实现
思路
redux编写
编写modules的state
编写reducer
export导出
编写foodsCart组件
引入方法
引入dispatch
传入对象
使用redux工具测试
统计区域功能实现
思路
cart组件取到carList长度渲染
成功实现
计算总价（reduce方法和toFixed）
高亮（classNames）
起送和结算显示控制（三元运算符）
购物车列表实现
思路
使用cartList渲染
把原本的cart干掉
替换
添加visible显示
增减reducer，action提交
store编写
export导出
熟悉Count组件
引入dispatcher
引入reducer
子传父触发回调
优化（不能是负数）
store里修改（判断逻辑）
清空购物车
store编写
reducer
export导出
cart组件引入reducer
然后导入dispatcher和reducer方法就可以了 
控制购物车显示和隐藏
思路（用useState控制，不用Redux）
编写classNames
优化（购物车列表为空应该是不会有蒙层的）
编写onShow函数控制
修改之前的setVisible方法为onShow
总结：多组件共享才要放到Redux里面去，如果不用的话直接用useState就可以了。
26、react-router
前言提示
Vue中不需要export页面，而React就需要
npx create-react-app react-router-pro
npm i react-router-dom
npm run start
实际的router配置
创建Login和Article页面并export
创建router目录并import组件最后export
index.js中注入router并且去配置即可
路由导航
声明式导航（Link）
编程式导航（useNavigate）
导航跳转传参
1、useSearchParams
在Article页接收参数
2、useParams
这个id是哪里来的呢？要到router实例去配置
编写样式
到router位置给占位符（重中之重）
后面要接收多个参数的话同样的方式操作即可
在Article页接收id
嵌套路由配置
Outlet
配置基本跟Vue没什么两样，多了个Outlet而已 ，作为二级路由出口
默认二级路由
我们要的是一进入就有显示"我是面板"，而不用专门去点击
404路由配置（path用星号"*"配置）
兜底组件
提高体验感
可以加一些按钮之类跳转到首页
两种路由模式
换成hash模式的话直接替换API就可以了，切换页面的时候路径前面有#
在实际开发中，后端支持的话就选history模式，不支持就选hash模式，其实没什么差别
记账本项目
功能演示
讲解：可以切换月份，可以切换年份，会展示每个月份的收支，可以输入"记一笔"
准备工作
移动端组件库antd-mobile
是阿里出品的适应React项目的组件库
配置别名路径@
配置步骤
修改pages.json的scripts
启动
npm run start
创建test.js测试
index.js导入
VsCode路径联想配置
数据Mock实现
json-sever实现数据mock
npm i -D json-sever
server目录下创建data.json文件放入数据
添加启动命令
意思是添加一个以data.json为数据源，端口号为8888的服务器
启动
npm run serve
访问接口
配置路由
编写router和pages
index.js引入
配置二级路由
antD-mobile主题定制
编写css文件
注入到入口文件
到官方文档可以看见更多配置
Redux管理账目列表
思路
补充name
编写异步（！！！）
记得导出异步
测试即可
TabBar
静态布局实现
ant design mobile官网查找
这个去看老师代码就可以
导入代码和scss文件
npm i scss
配置跳转路由（onChange、useNavigate）
统计功能
需要实现的：可以切换不同月份的账单，小箭头有一个交互的效果，然后下面的三个部分都有统计
源代码去文档复制即可
点击切换搜索
换一下visible
关闭弹窗（onCacel）
onConfirm
蒙层（onClose）
可以都换成一个函数然后绑定
切换上下箭头
点击确定切换时间显示
逻辑：点击确定的时候会回调一个时间，我们调用一下set方法就可以了
嵌入CurrentDate
这里会显示错误，加个字符串就可以
时间显示有点长，引入dayjs进行格式化
账单数据按月分组
从Redux中拿到数据以及二次处理（useMemo）
按月分组（lodash）
npm i lodash
计算统计数据
获取当前月
定义monthList
从useMemo取到数据
编写新Memo
渲染数据
初始化计算
当日统计
组件去复制模版然后export，导入到index.js就可以
子组件接收
引入父组件的计算逻辑
更换遍历数据
单日账单列表显示
复制模版
复制数据
底部的累加器中英文关系
引入
点击切换
控制显示隐藏
更换图标
基地址不变，变图片就可以
准备静态代码，然后引入即可
父传子
新增账单
还是一样去复制New代码
设置激活状态
设置页面切换
新增表单实现
绑定value和onChange
绑定账单类型,useFor
编写Redux
主文件引入
收尾优化
高亮
当选中种类后也有选择效果
时间记账
设置visible
点击确定
存储时间
修改完状态后关闭时间选择器
修改时间
