React全家桶(技术栈)_react全家桶包括哪些技术

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’

4. import reducer from ‘./reducers’

5. const store = createStore(reducer)

6. 此对象的功能?

7. getState(): 得到state

8. dispatch(action): 分发action, 触发reducer调用, 产生新的state

9. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

7.3. redux的核心API

7.3.1. createstore()

作用：创建包含指定reducer的store对象

7.3.2. store对象

1. 作用: redux库最核心的管理对象

2. 它内部维护着:

3. state

4. reducer

5. 核心方法:

6. getState()

7. dispatch(action)

8. subscribe(listener)

9. 具体编码:

10. store.getState()

11. store.dispatch({type:‘INCREMENT’, number})

12. store.subscribe(render)

7.3.3. applyMiddleware()

作用：应用上基于redux的中间件(插件库)

7.3.4. combineReducers()

作用：合并多个reducer函数

7.4. 使用redux编写应用

效果

7.5. redux异步编程

7.5.1理解：

1. redux默认是不能进行异步处理的,
2. 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

7.5.2. 使用异步中间件

npm install --save redux-thunk

7.6. react-redux

7.6.1. 理解

1. 一个react插件库
2. 专门用来简化react应用中使用redux

7.6.2. react-Redux将所有组件分成两大类

1. UI组件

2. 只负责 UI 的呈现，不带有任何业务逻辑

3. 通过props接收数据(一般数据和函数)

4. 不使用任何 Redux 的 API

5. 一般保存在components文件夹下

6. 容器组件

7. 负责管理数据和业务逻辑，不负责UI的呈现

8. 使用 Redux 的 API

9. 一般保存在containers文件夹下

7.6.3. 相关API

1. Provider：让所有组件都可以得到state数据

2. connect：用于包装 UI 组件生成容器组件

3. mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

4. mapDispatchToProps：将分发action的函数转换为UI组件的标签属性

7.7. 使用上redux调试工具

7.7.1. 安装chrome浏览器插件

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

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

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

2. connect：用于包装 UI 组件生成容器组件

3. mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

4. mapDispatchToProps：将分发action的函数转换为UI组件的标签属性

7.7. 使用上redux调试工具

7.7.1. 安装chrome浏览器插件

[外链图片转存中…(img-hIO61bQo-1714247107090)]
[外链图片转存中…(img-3Bm3k4wI-1714247107091)]
[外链图片转存中…(img-2itPkYbg-1714247107091)]

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

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

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