依古比古学前端-CSDN博客

转载 React Hook的发展史

1. Hook 用来解决什么问题一句话，Hook 是用来让我们更好地复用 React 状态逻辑代码的。注意这里说的不是模板代码，模板代码可以用组件来复用；而单纯的状态逻辑代码没法用组件复用有的同学可能会说，普通的函数不就可以实现逻辑代码复用吗？答案是：普通的函数可以复用逻辑代码，但是没法复用带状态的逻辑代码。什么是React的状态？举个例子：const Comp = () => { const [id, setId] = useState(0) const [asset

2022-03-07 14:00:18 378

原创 JS向数组中添加元素的方式

1、Array.push()使用 array.push() 方法，可以追加新的元素到原数组的末尾，push() 接收一个可变参数，可以一次性追加多个元素。这个方法会直接修改原数组：let arr = [1, 2, 3];arr.push(4);arr; // [1, 2, 3, 4]arr.push(5, 6);arr; // [1, 2, 3, 4, 5, 6]2、Array.unshift()是使用 array.unshift()，与 push() 的操作类似，只是把元素追

2022-02-25 11:15:44 13520

原创 18位字母数字校验

18位字母数字校验：const otherRules = [ { validator: (a: any, b: any, callback: any) => { console.log('callback',callback) if (b) { if (!/^[A-Za-z0-9]+$/.test(b)) { callback("只能输入数字、字母"); } else if (b.length === 18.

2021-10-19 15:49:45 549

原创 Hooks中常见的方法使用

1. 三个常用的Hook(1)useState()(2)useEffect()(3)useRef()2. useState(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作(2). 语法: const [xxx, setXxx] = React.useState(initValue) (3). useState()说明: 参数: 第一次初始化指定的值在内部作缓存返回值: 包含2个元素的数组, 第1个为内部当...

2021-10-09 17:39:59 949

原创 Vue中常用插件的安装

Vue脚手架：vue-cli可以使用淘宝镜像加速安装：npm config set registry https://registry.npm.taobao.org第一步（仅第一次执行）：全局安装@vue/cli。 npm install -g @vue/cli第二步：切换到你要创建项目的目录（使用cmd命令提示框），然后使用命令创建项目 vue create xxxx第三步：启动项目 npm run serveaxios插件：npm i a

2021-09-29 14:07:48 165

原创 js数组的增删改查方法、js截取数组方法

增加的方法：1.push()方法向数组中末尾添加一个元素,原数组改变。2.unshift()方法向数组中开始元素添加一个元素,原数组改变。3.splice()方法:可以添加、删除元素、也可以截取数组片段。arr.splice(n,m,x)从索引n开始删除m个元素,把新增的元素x放在索引n的前面，把删除的元素当成一个新数组返回，原有数组改变。删除的方法:1.pop()方法删除数组中的最后一项,返回是删除数组那一项，原数组改变。2.shift()方法删除数组中的第一项,返回是删..

2021-09-20 12:23:57 647

原创常用的Linux基础命令

1、cd ：改变目录。2、cd.. ：回退到上一个目录，直接cd进入默认目录。3、ls ：列出当前目录中的所有文件。ll ：详细的列出当前目录中的所有文件。4、touch ：新建一个文件 touch index.js 就会在当前目录下新建一个index.js文件。5、pwd ：显示当前所在的目录路径。6、rm: 删除一个文件, rm index.js 就会把index.js文件删除。7、mkdir: 新建一个目录,就是新建一个文件夹。8、rm -r : 删除一个文件夹, r...

2021-09-13 11:19:24 60

原创 TCP/UDP/IP/Socket的定义

TCP（Transmission Control Protocol ）传输控制协议（TCP），是一种面向连接的、可靠的、基于字节流的传输层通信协议在简化的计算机网络OSI模型中，它完成第四层传输层所指定的功能，用户数据报协议（UDP）是同一层内另一个重要的传输协议在因特网协议族（Internet protocol suite）中，TCP层是位于IP层之上，应用层之下的中间层。不同主机的应用层之间经常需要可靠的、像管道一样的连接，但是IP层不提供这样的流机制，而是提供不可靠的包交换。...

2021-09-06 09:43:43 265 1

原创 Vue组件间的通信方式

props配置项（子组件 ===> 父组件或父组件 ===> 子组件）如果是子向父传，需要父组件给子组件一个函数，子将数据放入函数的回调中，在通过props传值功能：让组件接收外部传过来的数据传递数据：<Demo name="xxx"/> 接收数据：第一种方式（只接收）：props:['name'] 第二种方式（限制类型）：props:{name:String} 第三种方式（限制类型、限制必要性、指定默

2021-09-03 11:24:00 561

原创路由器的两种工作模式hash和history

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。 hash模式：地址中永远带着#号，不美观。若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。兼容性较好。 history模式：地址干净，美观。兼容性和hash模式相比略差。应用部署上线时需...

2021-09-03 11:03:47 111

原创 dom事件流

浏览器机制中触发事件的三个阶段:· 事件捕获· 事件目标处理函数· 事件冒泡· 当达到某个条件触发了某个元素绑定的事件的时候,就会从document顶级元素发送一个事件流,顺着dom树一层一层向下查找,直到找到了目标元素,这个层层查找的过程称为*事件的捕获*,在这个阶段不会触发绑定的事件.· 达到目标元素,这个阶段称为"*事件目标处理函数*",触发这个元素绑定的事件· 然后就从目标元素开始一层层往顶层元素传递,在这个过程中如果发现元素绑定了此类型的事件,就会触发,这就是*事件冒泡.*

2021-09-02 17:15:55 55

原创 http的了解、get/post的区别

超文本传输协议，构建与TCP/IP协议之上，默认端口号为80，处于网络体系结构的最顶层应用层上，Http协议采用的是请求/响应的工作方式。Http是无连接无状态的。Q1:怎么理解Http是无连接无状态的无连接是指限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后，服务器根据请求，会给我们发送数据过来，但是，发送完，不会记录..

2021-09-02 17:05:27 777 1

原创 http的响应状态码

200 OK 客户端请求成功（一般200--299之间表示成功的意思）201 create 已创建成功请求并创建了新的资源。301 Moved Permanently 请求永久重定向302 Moved Temporarily 请求临时重定向304 Not Modified 文件未修改，可以直接使用缓存的文件。400 Bad Request 由于客户端请求有语法错误，不能被服务器所理解。401 Unauthorized 请求未经授权。这个状态代码必须和WWW-Authentic..

2021-09-02 17:02:09 48

原创 CSS居中的方法，水平、垂直

水平居中1.行内元素1.首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;2.如果父级元素不是块级元素，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;2.块级元素1.定宽度：需要谁居中，给其设置 margin: 0 auto;（作用：使盒子自己居中）2.不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为行内元素，即inline或者inline-block，然后给父元素设置 text-ali

2021-09-02 15:37:06 54

原创两侧固定，中间自适应的方法

1.利用自身浮动左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度.2.利用绝对定位（子绝父相）利用绝对定位的两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度.3.利用flex弹性布局设置flex：1；可以自适应剩余空间。4.利用负margin值中间部分浮动，设置宽度100%，充满整个屏幕宽，内部一个div放置内容，利用margin留出左右两块的宽度.5.利用display:table;

2021-09-02 15:32:32 301

原创 cookies sessionStorage和localstorage区别

相同点：都存储在客户端（浏览器端）不同点：1.存储大小不同，存活时间不同，1· cookie数据大小不能超过4k。只能使用文本文件，一般小于50条，是服务器发送到浏览器的一小段数据，会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M和20M或更大。2.有效时间· localStorage 存储持久数据，浏览器关闭后数据不丢失除非手动删除数据；在多个窗口下（同一

2021-09-02 15:21:26 72

原创 js 数据类型有几种？它们之间的区别是什么

1.基本数据类型和引用(复杂)数据类型区别 : 1)基本类型在栈内存,引用类型在堆内存分配地址;2)不同的内存分配机制也带来了不同的访问机制;3)赋值变量时的不同;4)参数传递的不同（把实参赋值给形参的过程);2.null 和 undefined 的区别typeof undefined　　// undefinedtypeof null 　　　// objectnull == undefined　　// truenull === undefined　　// fal...

2021-09-02 15:06:50 358

原创 js判断数据类型

1、typeof检测不出null 和数组，结果都为object，所以typeof常用于检测基本类型2、instanceof不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系3、constructornull、undefined没有construstor方法，因此constructor不能判断undefined和null。但是contructor的指向是可以被改变，所以不安全4、...

2021-09-02 15:03:16 85

原创重排（reflow）和重绘（repaint）的区别，元素的隐藏与显示

重排一定引起重绘，重绘不一定引起重排display:none会引起回流和重绘，visibility:hidden会引起重绘重绘（reflow）：重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。重排/回流（reflow）：当渲染树中的一部分(或全部)因为元素的尺寸，布局，隐藏等改变而需要重新构建, 就会发生回流现象。浏览器第一次加载页面的时候就是回流（正常...

2021-08-27 22:06:37 368

原创前端 link和@import的区别

1.引入的不同：link(外部引用): <link rel="stylesheet" type="text/css"href="xxx" />@import(导入式): @import url(xxx);2.link 一般放在 head 标签中，而 @import 必须放在 <style type="text/css"> 标签中（vue中除外）。3.link 可以通过JS操作DOM，来改变样式，而 @import 不可以。4. link...

2021-08-26 19:54:19 326

依古比古学前端