2024年React全家桶(技术栈)_react全家桶包括哪些技术，2024年最新大数据开发模块化面向接口编程

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2.1.3. 注意

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

2.1.4. 渲染类组件标签的基本流程

1. React内部会创建组件实例对象
2. 调用render()得到虚拟DOM, 并解析为真实DOM
3. 插入到指定的页面元素内部

2.2. 组件三大核心属性1: state

2.2.1. 效果

*需求😗* 定义一个展示天气信息的组件

1. 默认展示天气炎热 或 凉爽

2. 点击文字切换天气

2.2.2. 理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.2.3. 强烈注意

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

b) 箭头函数

3. 状态数据，不能直接修改或更新

2.3. 组件三大核心属性2: props

2.3.1. 效果

*需求😗* 自定义用来显示一个人员信息的组件

1. 姓名必须指定，且为字符串类型；

2. 性别为字符串类型，如果性别没有指定，默认为男

3. 年龄为字符串类型，且为数字类型，默认值为1*8

2.3.2. 理解

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

2.3.3. 作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

2.3.4. 编码操作

1. 内部读取某个属性值

2. 对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

​

3. 扩展属性: 将对象的所有属性通过props传递

4. 默认属性值：

5. 组件类的构造函数

2.4. 组件三大核心属性3: refs与事件处理

2.4.1. 效果

需求: 自定义组件, 功能说明如下:

1. 点击按钮, 提示第一个输入框中的值

2. 当第2个输入框失去焦点时, 提示这个输入框中的值

效果如下：

2.4.2. 理解

组件内的标签可以定义ref属性来标识自己

2.4.3. 编码

1. 字符串形式的ref

2. 回调形式的ref

3. createRef创建ref容器·

2.4.4. 事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)

2. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件

3. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

4. 通过event.target得到发生事件的DOM元素对象

2.5. 收集表单数据

2.5.1. 效果

*需求😗* 定义一个包含表单的组件

*输入用户名密码后,** 点击登录提示输入信息

2.5.2. 理解

包含表单的组件分类

1. 受控组件
2. 非受控组件

2.6. 组件的生命周期

2.6.1. 效果

需求:定义组件实现以下功能：

1. 让指定的文本做显示 / 隐藏的渐变动画

2. 从完全可见，到彻底消失，耗时*2S

3. 点击“不活了”按钮从界面中卸载组件

2.6.2. 理解

1. 组件从创建到死亡它会经历一些特定的阶段。
2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

2.6.3. 生命周期流程图(旧)

生命周期的三个阶段（旧）

​ 1. 初始化阶段: 由ReactDOM.render()触发—初次渲染

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

​ 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. shouldComponentUpdate()
2. componentWillUpdate()
3. render()
4. componentDidUpdate()

​ 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount()

2.6.4. 生命周期流程图(新)

生命周期的三个阶段（新）

1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
2. constructor()

2. getDerivedStateFromProps

3. render()
4. componentDidMount()

​ 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. getDerivedStateFromProps

2. shouldComponentUpdate()
3. render()

4. getSnapshotBeforeUpdate

5. componentDidUpdate()

​ 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount()

2.6.5. 重要的勾子

1. render：初始化渲染或更新渲染调用
2. componentDidMount：开启监听, 发送ajax请求
3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

2.6.6. 即将废弃的勾子

1. componentWillMount
2. componentWillReceiveProps
3. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

2.7. 虚拟DOM与DOM Diffing算法

2.7.1. 效果

需求：验证虚拟DOM Diffing算法的存在

2.7.2. 基本原理图

第3章：React应用(基于React脚手架)

3.1. 使用create-react-app创建react应用

3.1.1. react脚手架

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
2. 包含了所有需要的配置（语法检查、jsx编译、devServer…）
3. 下载好了所有相关的依赖
4. 可以直接运行一个简单效果
5. react提供了一个用于创建react项目的脚手架库: create-react-app
6. 项目的整体技术架构为: react + webpack + es6 + eslint
7. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3.1.2. 创建项目并启动

第一步，全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目：npm start

3.1.3. react脚手架项目结构

​ public ---- 静态资源文件夹

​ favicon.icon ------ 网站页签图标

​ index.html -------- 主页面

​ logo192.png ------- logo图

​ logo512.png ------- logo图

​ manifest.json ----- 应用加壳的配置文件

​ robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

​ App.css -------- App组件的样式

​ App.js --------- App组件

​ App.test.js ---- 用于给App做测试

​ index.css ------ 样式

​ index.js ------- 入口文件

​ logo.svg ------- logo图

​ reportWebVitals.js

​ — 页面性能分析文件(需要web-vitals库的支持)

​ setupTests.js

​ ---- 组件单元测试的文件(需要jest-dom库的支持)

3.1.4. 功能界面的组件化编码流程（通用）

1. 拆分组件: 拆分界面,抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件

3.1 动态显示初始化数据

3.1.1 数据类型

3.1.2 数据名称

3.1.2 保存在哪个组件?

3.2 交互(从绑定事件监听开始)

3.2. 组件的组合使用-TodoList

*功能😗* 组件化实现此功能

1. 显示所有todo列表

2. *输入文本,* *点击按钮显示到列表的首位,* 并清除输入的文本

第4章：React ajax

4.1. 理解

4.1.1. 前置说明

1. React本身只关注于界面, 并不包含发送ajax请求的代码
2. 前端应用需要通过ajax请求与后台进行交互(json数据)
3. react应用中需要集成第三方ajax库(或自己封装)

4.1.2. 常用的ajax请求库

1. jQuery: 比较重, 如果需要另外引入不建议使用

2. axios: 轻量级, 建议使用

3. 封装XmlHttpRequest对象的ajax

4. promise风格

5. 可以用在浏览器端和node服务器端

4.2. axios

4.2.1. 文档

https://github.com/axios/axios

4.2.2. 相关API

GET请求

axios.get(‘/user?ID=12345’) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); axios.get(‘/user’, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

POST请求

axios.post(‘/user’, { firstName: ‘Fred’, lastName: ‘Flintstone’}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

4.3. 案例—github用户搜索

4.3.1. 效果

请求地址: https://api.github.com/search/users?q=xxxxxx

4.4. 消息订阅-发布机制

1. 工具库: PubSubJS

2. 下载: npm install pubsub-js --save

3. 使用:

4. import PubSub from ‘pubsub-js’ //引入

5. PubSub.subscribe(‘delete’, function(data){ }); //订阅

6. PubSub.publish(‘delete’, data) //发布消息

4.5. 扩展：Fetch

4.5.1. 文档

1. https://github.github.io/fetch/
2. https://segmentfault.com/a/1190000003810652

4.5.2. 特点

1. fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
2. 老版本浏览器可能不支持

4.5.3. 相关API

1. GET请求

fetch(url).then(function(response) { return response.json() }).then(function(data) { console.log(data) }).catch(function(e) { console.log(e) });

2. POST请求

fetch(url, { method: “POST”, body: JSON.stringify(data), }).then(function(data) { console.log(data) }).catch(function(e) { console.log(e) })

第5章：React路由

5.1. 相关理解

5.1.1. SPA的理解

1. 单页Web应用（single page web application，SPA）。
2. 整个应用只有一个完整的页面。
3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
4. 数据都需要通过ajax请求获取, 并在前端异步展现。

5.1.2. 路由的理解

1. 什么是路由?

1. 一个路由就是一个映射关系(key:value)
2. key为路径, value可能是function或component

2. 路由分类

1. 后端路由：

2. 理解： value是function, 用来处理客户端提交的请求。

3. 注册路由： router.get(path, function(req, res))

4. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

5. 前端路由：

6. 浏览器端路由，value是component，用于展示页面内容。

7. 注册路由:

8. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

5.1.3. react-router-dom的理解

1. react的一个插件库。
2. 专门用来实现一个SPA应用。
3. 基于react的项目基本都会用到此库。

5.2. react-router-dom相关API

5.2.1. 内置组件

5.2.2. 其它

1. history对象
2. match对象
3. withRouter函数

5.3. 基本路由使用

5.3.1. 效果

5.3.2. 准备

1. 下载react-router-dom: npm install --save react-router-dom
2. 引入bootstrap.css:

5.4. 嵌套路由使用

效果

5.5. 向路由组件传递参数数据

效果

5.6. 多种路由跳转方式

效果

第6章：React UI组件库

6.1.流行的开源React UI组件库

6.1.1. material-ui(国外)

1. 官网: http://www.material-ui.com/#/
2. github: https://github.com/callemall/material-ui

6.1.2. ant-design(国内蚂蚁金服)

1. 官网: https://ant.design/index-cn
2. Github: https://github.com/ant-design/ant-design/

第7章：redux

7.1. redux理解

7.1.1. 学习文档

1. 英文文档: https://redux.js.org/
2. 中文文档: http://www.redux.org.cn/
3. Github: https://github.com/reactjs/redux

7.1.2. redux是什么

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

7.1.3. 什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
2. 一个组件需要改变另一个组件的状态（通信）。
3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

7.1.4. redux工作流程

7.2. redux的三个核心概念

7.2.1. action

1. 动作的对象
2. 包含2个属性

l type：标识属性, 值为字符串, 唯一, 必要属性

l data：数据属性, 值类型任意, 可选属性

3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

7.2.2. reducer

1. 用于初始化状态、加工状态。
2. 加工时，根据旧的state和action， 产生新的state的纯函数。

7.2.3. store

1. 将state、action、reducer联系在一起的对象

2. 如何得到此对象?

3. import {createStore} from ‘redux’

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

g.csdnimg.cn/img_convert/8ffb0ac9c79450c4282e89de892cca74.jpeg)

7.2. redux的三个核心概念

7.2.1. action

1. 动作的对象
2. 包含2个属性

l type：标识属性, 值为字符串, 唯一, 必要属性

l data：数据属性, 值类型任意, 可选属性

3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

7.2.2. reducer

1. 用于初始化状态、加工状态。
2. 加工时，根据旧的state和action， 产生新的state的纯函数。

7.2.3. store

1. 将state、action、reducer联系在一起的对象

2. 如何得到此对象?

3. import {createStore} from ‘redux’

[外链图片转存中…(img-SfQTnyrk-1715230896435)]
[外链图片转存中…(img-V6yOe5tK-1715230896436)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！