黑马React保姆级（PPT+笔记）

目录

一、react基础

1.进程

2、优势

3、市场

4、搭建脚手架

认识目录

核心依赖（右边两个react）

去除非必要

运行原理：

总结

5、JSX

本质

高频场景

注意​编辑

渲染列表

总结

条件渲染

简单情况

复杂情况

事件绑定（交互）

获取事件参数e

自定义参数（要用函数引用）

两个都要

6、组件

7、useState

状态不可变

修改对象状态

8、组件样式变化

1、行内样式

2、类名

9、B站评论案例

渲染

删除

切换功能

排序

改进

10、classnames优化类名

安装包

import

11、受控表单绑定

12、react中获取dom

13、发布评论

1、获取评论内容

2、点击发布触发回调函数

3、优化

安装uuid

day.js​编辑

13、清空内容并聚焦案例

1、清空内容

2、聚焦

14、组件通信

父传子

props说明

children说明

子传父

兄弟组件通信

跨层组件通信

15、useEffect

依赖项参数说明

第一种情况

第二种情况

第三种情况

清除副作用

16、自定义hook函数

不封装直接实现

封装自定义Hook实现

抽象实现的通用逻辑

17、ReactHooks使用规则

第一种错误

第二种错误

18、优化B站评论

需求1

json-sever

根目录创建db.json

pages.json添加serve

npm run serve启动

axios

从后台获取数据 

需求2

封装函数

App组件调用

需求3

封装Item组件

封装删除功能（子组件调用父组件 / 父传子）

19、Redux

快速体验（计数器）

模版

流程梳理

20、react-redux

配置基础环境

store目录结构设计

21、用redux继续实现counter案例

整体路径熟悉

使用Reacttoolkit创建counterStore

使用中间件react-redux连接，为React注入store

react中使用store数据

useSelector

react中修改store数据

useDispatch

总结

22、提交action传参

需求

实现

完整代码

23、react-redux异步操作

异步操作样板代码

24、redus调试-devtools

安装扩展程序

25、美团案例

准备工作

分类和商品列表

启动项目

 创建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渲染

增减reducer，action提交

 store编写

export导出

 熟悉Count组件

引入dispatcher

引入reducer

子传父触发回调 

优化（不能是负数）

store里修改（判断逻辑）

清空购物车

store编写

reducer

export导出

​编辑cart组件引入reducer

​编辑

控制购物车显示和隐藏

思路（用useState控制，不用Redux）

优化（购物车列表为空应该是不会有蒙层的）

编写onShow函数控制

26、react-router

前言提示

实际的router配置

创建Login和Article页面并export

创建router目录并import组件最后export

index.js中注入router并且去配置即可

路由导航

声明式导航（Link）

​编辑

编程式导航（useNavigate）

导航跳转传参

1、useSearchParams

在Article页接收参数​编辑

2、useParams

编写样式

 到router位置给占位符（重中之重）

在Article页接收id

嵌套路由配置

Outlet

默认二级路由

404路由配置（path用星号“*”配置）

兜底组件

提高体验感

两种路由模式

记账本项目

准备工作

 移动端组件库antd-mobile

配置别名路径@

配置步骤

修改pages.json的scripts

启动

创建test.js测试

index.js导入

VsCode路径联想配置

​编辑

数据Mock实现

​编辑 json-sever实现数据mock

server目录下创建data.json文件放入数据

添加启动命令

启动

访问接口 

配置路由

编写router和pages 

index.js引入

配置二级路由

antD-mobile主题定制

编写css文件

注入到入口文件

Redux管理账目列表

思路

编写异步（！！！）

TabBar

静态布局实现

导入代码和scss文件

配置跳转路由（onChange、useNavigate）

统计功能

点击切换搜索

关闭弹窗（onCacel）

onConfirm

蒙层（onClose）

切换上下箭头

点击确定切换时间显示

​编辑

账单数据按月分组

从Redux中拿到数据以及二次处理（useMemo）

计算统计数据

编写新Memo

渲染数据

初始化计算

当日统计

单日账单列表显示​编辑

点击切换

 更换图标

新增账单

新增表单实现

收尾优化

高亮

 时间记账

27、规范项目

目录结构

scss

嵌套语法

antDesign

测试

Router

步骤

编写router

引入routerProvider和router

配置别名路径

登录

表单校验

失焦时校验

多条校验规则

获取数据

封装request模块

 配置

中转工具模块函数​编辑

redux管理token

异步获取token

登录界面触发异步

后续逻辑

token持久化

本地存储

封装token的存储

编写

放到中转工具函数

调用封装函数

Axios头注入token

使用token跳转路由

高阶组件

Layout静态结构搭建

清除默认边距

占满整个屏幕

二级路由配置

放置二级路由出口

点击菜单跳转路由

navigate跳转

---

 

一、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

运行原理：

总结

创建->清理

创建react的其他方式

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

点击确定

存储时间

修改完状态后关闭时间选择器

修改时间

27、规范项目

目录结构

scss

npm i scss -D

嵌套语法

antDesign

npm i antd --save

测试

Router

步骤

编写router

引入routerProvider和router

配置别名路径

这里前面有就不重复了

登录

表单校验

校验逻辑可以去antd官网组件看

失焦时校验

多条校验规则

获取数据

封装request模块

npm i axios

 配置

中转工具模块函数

redux管理token

npm i react-redux @reduxjs/toolkit

绑定Provider和store

异步获取token

登录界面触发异步

redux可以看到有token存储

后续逻辑

我们不能直接触发异步就跳转，这样会有风险，所以要先等待结果返回，所以要加async和await

token持久化

刷新的时候看看本地存储有没有，有的话就存储，没有的话再给空字符串

本地存储

修改初始化token

不能这么简单粗暴

封装token的存储

编写

放到中转工具函数

调用封装函数

Axios头注入token

讲解：前面部分是前端的固定编写部分，后面部分由后端要求来拼接

token测试

在xhr那里看请求头是否有加上Authorizatoin字段

使用token跳转路由

高阶组件

放进component里

route.js引入

删除localstorage里的token然后再刷新一下页面就可以了

Layout静态结构搭建

清除默认边距

这样是有问题的，接下来要安装一个样式全局初始化插件，可以把浏览器默认的padding,margin清除掉

npm i normalize.css

入口文件导入

占满整个屏幕

放入入口css文件

root指的是public目录下的div，就是body下的子节点

二级路由配置

放置二级路由出口

点击菜单跳转路由

原理：点击传route的key进去

navigate跳转