前言 对于react的生命周期一直是在工作中很重要的,我们往往需要在需要的时间段做自己需要的事情,在 React 中，生命周期大致上可以分为初始化（Initialization）、挂载（Mounting）、更新（Updating）和卸载（Unmounting） 这几个阶段，每个阶段又会分别调用不同的生命周期函数。当然随着react版本的更新,也会出现相对的变化,所以我们现在来参考总结下 大部分团队不见得会跟进升到16版本，所以16前的生命周期还是很有必要掌握的，何况16也是基于之前的修改 一 初始化阶段 Initialization 也就是以下代码中类的构造方法( cons...

文章目录 1. URL输入 2. DNS解析 2.1DNS解析的过程 2.2 DNS查询的两种方式：递归查询和迭代查询 2.3 DNS负载均衡 2.4 DNS缓存 3. TCP连接（三次握手） 4. 发送HTTP请求 补充 (1)GET 对比 POST 补充(2) HTTPS和HTTP的区别 5.服务器返回一个 HTTP 响应 补充:常见状态码 6. 关闭 TCP 连接（四次挥手） 7. 浏览器解析渲染页面 补充...

Flex简介 在flex布局之前,我们想要为页面做一个有优雅的两栏或者三栏布局需要大费周折的使用浮动或者定位来实现,如今我们可以快速方便是使用flex弹性盒子来实现 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。块级元素使用display: flex; 行内元素使用inline-flex,容器使用Flex布局后，子元素的float、clear和verticle-align属性将失效 基本概念 当前元素设置display: flex;或者inline-flex,该盒子称为flex containe...

关于JavaScript中的this 1. 函数预编译过程this - > window function foo() { console.log(this); } foo(); //全局变量 函数调用中的this也指向全局变量。 注：ECMAScript5的strict模式不存在全局变量，这里的this是undefined。 2. 全局作用域里this -> window console.log(this); //全局变量 全局范围使用this指向的是全局变量，浏览器环境下就是window。 注：ECMAScript5的strict模式不存在...

背景 在html5出来之前，cookie- 直作为本地存储的一个方法来使用。后来html5提供了-种在客户端本地保存数据的功能，它就是Web Storage,具体来说，Web Storage又分为两种:localStorage和sessionStotage在客户端存储数据，WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。 cookie cookie英文饼干，顾名思义，大小应该非常小，cookie非常小，它的大小限制在4kb左右，是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如你...

一. jsvascript中的数据类型 原始类型:Boolean,string,number,null,undefined,symbol,BigInt(可以用任 精度表示整数) 特殊: symbol: ES6新增,表示独一无二的值,数据类型 “symbol” 是一种原始数据类型，该类型的性质在于这个类型的值可以用来创建匿名的对象属性。该数据类型通常被用作一个对象属性的键值——当你想让它是私有的时候。一个具有数据类型 “symbol” 的值可以被称为 “符号类型值”。在 JavaScript 运行时环境中，一个符号类型值可以通过调用函数 Symbol() 创建，这个函数...

浅拷贝 当把数组或对象简单赋值给其他变量的时候，实际上进行的是浅拷贝，浅拷贝是拷贝引用，只是将拷贝后的引用指向同一个对象实例，彼此间的操作还会互相影响。 1. 使用 for in 遍历 简单的拷贝对象的属性,如果属性是基础类型则没有问题,但是对象是对象类型(数组,函数)则只是拷贝的是引用,改变原始的属性,拷贝出来的属性也会跟着改变 function shallowCopy(source){ var target=source instanceof Array ? [] : { }; for(var i in source){ // 使用 h...

1. ES6的extends 使用extends 关键字实现类之间的继承。这比在ES5中使用继承要方便很多。 //定义类父类 class Animal { constructor(color) { this.color = color; } greet(sound) { console.log(sound); } } class Dog extends Animal { constructor(color) { super(color); ...

1. CSRF 通常称为跨站请求伪造，英文名Cross-site request forgery缩写CSRF 1.1 攻击原理 实现攻击的两大关键因素: 网站中的某个接口存在这种漏洞 用户确实在A注册网站确实的登录过 1.2 CSRF防御措施 Token验证 Referer验证 隐藏令牌 2. xss XSS (cross-site scripting跨域脚本攻击) 2.1 xss的攻击方式 1. 反射型 发出请求时，XSS代码出现在URL中，作为输入提交到服务器端,服务器端解析后响应，XSS代码随响应内容...

一.BFC BFC介绍 二.清除浮动 常用清除浮动 三.哪些移动端布局 答：流式布局-百分比、弹性盒子-flex、网格布局-grid、rem/em、vm/vh rem em em相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小例如.box {font-size：16px;}则1em = 16px .box {font-size：32px; }则1em = 32px，0.5em = 16px rem相对长度单位，其参照根元素（html）字号大小例如html {font-size：16px;}则1rem = 16px html {font-size...

题目1 小明的女朋友最喜欢在网上买买买了，可是钱包里钞票有限，不能想买啥就买啥。 面对琳琅满目的物品，她想买尽可能多的种类，每种只买一件，同时总价格还不能超过预算上限。 于是她请小明写程序帮她找出应该买哪些物品，并算出这些物品的总价格。 输入规范： 包含两个输入框，一个计算按钮。 第一个是预算上限。(从输入框填写) 第二个是用空格分隔的一组数字，代表每种物品的价格。(从输入框填写) 所有数字都为正整数并且不会超过10000。 输出规范： 对每个输入，点击计算按钮后输出应买物品的总价格。 输入示例1: 100 50 50 输出示例1: 100 输入示例2: 188 50 42 9 15...

今日一道题: 实现一个函数 find(nums) 返回 nums 中第三大值的下标，如果不足3个数返回 -1 用的比较简单的去重方式, 存在一个问题:如果是第三大的数是几个重复的数,那第三大的数的下标算成啥,这里没有解决,希望有大佬提供好的方法 const find = nums => { if (nums.length < 3) { return -1 } //利用ES6特性进行数组去重 const newNums = [...new Set (nums)] for (let i = 0; i<newNums.length...

一个关于判断页面用了多少种不同的html标签的题 定义一个数组用于存放相同的元素再定义一个空数组用于存放每一个标签 希望有大佬提供好的方法 let tags = document.getElementsByTagName('*'); let tagsArr = []; const countTag =() => { for (let i = 0; i < tags.length; i++) { tagsArr.push((tags[i].tagName).toLowerCase());//toLowerCase() 方法用...

手写一个promise实际上是非常复杂的,一个简洁版本的可以让我们明确设计思路 // 三个常量用于表示状态 const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this this.state = PENDING // value 变量用于保存 resolve 或者 reject 中传入的值 this.value = null // 用于保存 then 中...