黑马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出去

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;