02 2023 档案
React高阶组件
摘要：一、什么是高阶组件（Higher-Order Components）？ 高阶函数：至少满足以下条件之一： 接受一个或多个函数作为输入； 输出一个函数； 高价组件官方定义：高阶组件是参数为组件，返回值为新组件的函数； 作用：让属性、方法进行继承 /* 高阶组件 // 高阶组件的作用 => 让属性进行继
阅读全文
react中类组件的写法
摘要：核心：1. 类组件必须要继承React.Component 2. 类组件中的render()方法，返回值是一个jsx // class 组件 import "./App.css"; import React from "react"; // 创建类组件 class App extends React
阅读全文
Redux Toolkit 的使用方法
摘要：Redux Toolkit 是什么？ Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，我们强烈建议你使用它。 它包括几个实用程序功能，这些功能可以简化最常见场景下的 Redux 开发，包括配置 sto
阅读全文
React Router有几种模式？实现原理？
摘要：一、是什么 在单页应用中，一个web项目只有一个html页面，一旦页面加载完成之后，就不用因为用户的操作而进行页面的重新加载或者跳转，其特性如下： 改变 url 且不让浏览器像服务器发送请求 在不刷新页面的前提下动态改变浏览器地址栏中的URL地址 其中主要分成了两种模式： hash 模式：在url后
阅读全文
什么是WebSocket？应用场景？
摘要：一、是什么 WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅 客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输 从上图可见，websocket服务器与客户端通过握手连接，
阅读全文
CDN的实现原理
摘要：一、是什么 CDN (全称 Content Delivery Network)，即内容分发网络 构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主
阅读全文
DNS协议 是什么？DNS 完整的查询过程?
摘要：一、是什么 DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器 简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址 IP 地址：一长串能够唯一地标记网络上的计算机的数字 域名：是由一串用点分隔的名字组成的 Int
阅读全文
在地址栏输入 URL 敲下回车后发生了什么?
摘要：一、简单分析 简单的分析，从输入 URL到回车后发生的行为如下： URL解析 DNS 查询 TCP 连接 HTTP 请求 响应请求 页面渲染 二、详细分析 URL解析 首先判断你输入的是一个合法的URL 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作 URL的解析第过程中的第一步，一个ur
阅读全文
TCP为什么需要三次握手和四次挥手？
摘要：一、三次握手 三次握手（Three-way Handshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包 主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备 过程如下： 第一次握手：客户端给服务端发一个 SYN 报文，并指明客
阅读全文
HTTP 常见的请求头有哪些? 分别有什么作用？
摘要：一、Http请求头是什么 HTTP头字段（HTTP header fields）,是指在超文本传输协议（HTTP）的请求和响应消息中的消息头部分 它们定义了一个超文本传输协议事务中的操作参数 HTTP头部字段可以自己根据需要定义，因此可能在 Web服务器和浏览器上发现非标准的头字段 下面是一个HTT
阅读全文
get和 post的区别
摘要：一、是什么 GET和POST，两者是HTTP协议中发送请求的方法 GET GET方法请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据 POST POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 本质上都是TCP链接，并无差别 但是由于HTTP的规定和浏览器
阅读全文
HTTP 常见的状态码有哪些，适用场景？
摘要：一、是什么 HTTP状态码（英语：HTTP Status Code），用以表示网页服务器超文本传输协议响应状态的3位数字代码 它由 RFC 2616规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774与 RFC 4918等规范扩展 简单来讲，http状态码的作用
阅读全文
HTTP1.0、1.1和2.0的区别
摘要：一、HTTP1.0 HTTP协议的第二个版本，第一个在通讯中指定版本号的HTTP协议版本 HTTP 1.0 浏览器与服务器只保持短暂的连接，每次请求都需要与服务器建立一个TCP连接 服务器完成请求处理后立即断开TCP连接，服务器不跟踪每个客户也不记录过去的请求 简单来讲，每次与服务器交互，都需要新开
阅读全文
TCP/IP协议
摘要：一、是什么 TCP/IP，传输控制协议/网际协议，是指能够在多个不同网络间实现信息传输的协议簇 TCP（传输控制协议） 一种面向连接的、可靠的、基于字节流的传输层通信协议 IP（网际协议） 用于封包交换数据网络的协议 TCP/IP协议不仅仅指的是TCP和IP两个协议，而是指一个由FTP、SMTP、T
阅读全文
OSI的七层模型
摘要：一、是什么 OSI （Open System Interconnect）模型全称为开放式通信系统互连参考模型，是国际标准化组织 ( ISO ) 提出的一个试图使各种计算机在世界范围内互连为网络的标准框架 OSI将计算机网络体系结构划分为七层，每一层实现各自的功能和协议，并完成与相邻层的接口通信。即每
阅读全文
UDP 和 TCP? 区别? 应用场景?
摘要：一、UDP UDP（User Datagram Protocol），用户数据包协议，是一个简单的面向数据报的通信协议，即对应用层交下来的报文，不合并，不拆分，只是在其上面加上首部后就交给了下面的网络层 也就是说无论应用层交给UDP多长的报文，它统统发送，一次发送一个报文 而对接收方，接到后直接去除首
阅读全文
为什么说HTTPS比HTTP安全? HTTPS是如何保证安全的？
摘要：一、安全特性 在上篇文章中，我们了解到HTTP在通信过程中，存在以下问题： 通信使用明文（不加密），内容可能被窃听 不验证通信方的身份，因此有可能遭遇伪装 而HTTPS的出现正是解决这些问题，HTTPS是建立在SSL之上，其安全性由SSL来保证 在采用SSL后，HTTP就拥有了HTTPS的加密、证书
阅读全文
react中redux怎么使用
摘要：一、redux是什么？ redux 就是react 全局状态管理，作用是存放全局数据 二、核心 state：存放数据 reducer：修改仓库数据 是一个函数，参数一：仓库中的数据，参数2：行为 actions 返回值就是 最新的仓库数据 就是在reduce中定义的方法，修改数据，相当于mutati
阅读全文
react的生命周期
摘要：一、React组件的生命周期 什么是组件的生命周期 组件从创建到挂载到页面中运行，再到组件卸载的过程，这个过程就称为生命周期 跟Vue一样，React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程 注意：React生命周期，主要谈类的生命周期，因为函
阅读全文
react中类组件和函数组件的理解？有什么区别
摘要：react中类组件和函数组件的理解？有什么区别 一、类组件 类组件，顾名思义，也就是通过使用ES6类的编写形式去编写组件，该类必须继承React.Component 如果想要访问父组件传递过来的参数，可通过this.props的方式去访问 在组件中必须实现render方法，在return中返回Rea
阅读全文
Redux的理解？Redux的工作原理
摘要：一、是什么 React是用于构建用户界面的，帮助我们解决渲染DOM的过程 而在整个应用中会存在很多个组件，每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享 如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的
阅读全文
react-router
摘要：react-router 一、在react项目中安装路由 官方文档：https://reactrouter.com/en/v6.3.0/getting-started/installation#basic-installation npm $ npm install react-router-dom
阅读全文
在react项目如何捕获错误
摘要：在React项目是如何捕获错误的？ 一、是什么 错误在我们日常编写代码是非常常见的 举个例子，在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象 作为一个框架，react也有自身对于错误的处理的解决方案 二、如何做
阅读全文
react中Hooks的理解和用法
摘要：一、Hooks是什么？ Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如： 难以重用和共享组件中的与状态相关的逻辑 逻
阅读全文
react知识点汇总
摘要：一、react认识 用于构建用户界面的 JavaScript 库 二、创建react项目：react脚手架 创建react项目，创建新的react应用 npx create-react-app my-app cd my-app npm start 分析react项目 node_modules：依赖包
阅读全文
css当文字过长时，显示省略号
摘要：/* 省略号三属性 */ /* 强制不换行 */ white-space: nowrap; /* 溢出隐藏 */ overflow: hidden; /* 省略号 */ text-overflow: ellipsis;
阅读全文
如何实现两栏布局，右侧自适应？三栏布局中间自适应
摘要：如何是心啊两栏布局，右侧自适应？三栏布局中间自适应？ 一、在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 两栏布局： 两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧
阅读全文
vue页面加载闪烁的问题以及解决方案
摘要：一、原因： 问题：当我们打开Vue页面的时候，如果弱网环境，会出现一个闪烁的效果下图：加载闪烁问题效果 原因：因为在浏览器中先执行html代码，先渲染Dom，然后再执行JavaScript代码，Vue还来不及处理的模板 二、解决： 在闪烁元素的最外层添加上一个v-cloak，并在css中添加样式：[
阅读全文
webpack核心用法，为什么要使用webpack
摘要：一：为什么使用webpack 1. 代码转换、文件优化、代码分割、模块合并、自动刷新、等等 2. webpack上手 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
阅读全文
元素水平垂直居中的方式有哪些？如果元素不定宽高怎么实现水平垂直居中？
摘要：一、分类 在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素 居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： 居中元素（子元素）的宽高已知 居中元素宽高未知 二、实现方式 实现元素水平垂直居中
阅读全文
