qq_43293207的博客

原文链接：https://segmentfault.com/a/11900000158163311.HTTP缓存浏览器第一次向一个web服务器发起http请求后，服务器会返回请求的资源，并且在响应头中添加一些有关缓存的字段如：Cache-Control、Expires、Last-Modified、ETag、Date等等。之后浏览器再向该服务器请求该资源就可以视情况使用强缓存和协商缓存。强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。协商缓存：浏览器发送请求到服务器，服务器判定是否可使

参考链接:https://juejin.cn/post/6844904005437669389#heading-16客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成。示例：请求行：指定的是请求方法、请求URL、协议版本请求头：以键值对形式存在的字段，展示该请求的一些规则参数空行请求体：该请求所传递的数据2.2 响应报文与请求报文同理，HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和

1.迭代器送代器Iterator是ES6提出的一种接口机制。它的目的主要在于为所有部署了Iterator接口的数据结构提供统一的访问机制，即按一定次序执行遍历操作。并且ES6也提出了针对Iterator遍历操作的专属遍历命令的标准，即for of循环1.1默认Itearator接口一个数据结构只要具有Symbol.iterator属性，就可以认为是"可迭代的"(iterable)Symbol.iterator属性本身是一个函数， 执行这个函数，就会返回一个迭代器Iterator，当使用for…of循

接上一条，如果遍历其原型链时存在对应的foo属性，并且该属性只读(writable:false)，则不会修改该属性或者创建该对象实例的直接属性，总之什么都不会发生(在非严格模式下会抛出错误)此方法与(2)相比，解决了原型对象引用共享的问题，但是如果函数Foo存在一些副作用(如修改状态，给this添加属性等)，同样会影响到Bar的实例对象，此法也不可取。如果obj对象没有直接包含名为foo的属性，就会历其原型链，如果仍然找不到名为foo的属性，则foo会被添加到obj的直接包含属性中。有一定轻微性能损失。

参考链接:https://juejin.cn/post/6844903621872582669https://juejin.cn/post/68449036382387568781. 单线程的jsjs作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。在js高程中举过一个栗子，如果js同时有两个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级？为了避免这种问题，js必须是一门单线程语言，并且在未来这个特点也不会改变。2. 执行栈和任务队列因为js是单线程

标题

1. 尺寸（1） node.style.width/height这个只能获取元素的内联style样式中定义的尺寸值，若该元素没有定义atyle属性，则返回值为空字符串此外，没有其他办法可以获取css样式设置的元素尺寸值（2） node.clientWidth/clientHeight表示元素的内容可视宽/高度 +水平/垂直方向padding值注意:针对纯行内元素(如apan，不包括行内块)该neI获取的值永远为0，通过document documentElement.clientWidth

参考链接：https://juejin.cn/post/6844903766949363726Mobx官方文档前言Mobx是一个透明函数响应式编程（Transparently Functional Reactive Programming，TFRP）的状态管理库，它使得状态管理简单可伸缩：1. 基本概念actions：一些改变状态值（state）的动作。state：可观察的状态值computed value：根据state，用pure function计算出来的值reactions：因

原文链接：https://juejin.cn/post/6844903846666321934#heading-5https://juejin.cn/post/6926509360596123661#heading-11. reduxReact有props和state:props意味着父级分发下来的属性state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，这就是react的单向数据流这就意味着如果是一个数据状态非常复杂的应用，更多的时候发现React根本无法

前言Context 通过组件树提供了一个传递数据的方法（类似一个简易的redux来存放公共数据），从而避免了在每一个层级手动的传递 props 属性。有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候，你需要从最外层的组件一层一层地通过props将数据传到最里层的组件时，你就需要慢慢向上寻找最初的值是什么，何苦呢？Context 提供了一种在组件之间共享这些值的方法，而无需显式地通过树的每一层传递 prop。1. 基本使用（1）创建contextcontext一般在顶层

参考链接：https://juejin.cn/post/6844903815762673671https://juejin.cn/post/6844904050236850184前言高阶组件与自定义hooks是React 目前流行的状态逻辑复用的两种解决方案1.高阶组件是什么高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。高阶组件（HOC）是React中的高级技术，用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组

参考文章：https://juejin.cn/post/68449038246839582861.虚拟dom原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom）每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了componentShouldUpdate生命周期来让开发者手动控制减少数据变化后不必要的虚拟dom对比，提升性能和渲染效

this是什么当一个函数被调用时，会创建一个执行上下文，它会记录函数的调用位置，调用方法，传入参数等信息。 this就是这些信息中的一个属性，会在函数执行时用到。this既不指向函数的词法作用城，也不指向函数自身。this是在函数被调用时才被绑定，并非函数编写或声明时绑定。它指向什么完全取决于函数在哪里被调用2.绑定规则2.1默认绑定当函数调用时，如果是使用不带任何修饰和前缀的，独立的函数引用进行调用时，此时的this为默认绑定，指向全局对象(浏览器中是window) function foo(

1. 旧版生命周期（v16.3之前）组件挂载过程（1） constructor()constructor 构造方法常用来初始化stateconstructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。当存在constructor的时候必须手动调用super方法。如果在constructor中想使用this关键字，就必须先调用super方法。在constructor中如果要

基本类型(string,number等)的值本身不具有属性和方法(如Iength和toString())，通过对应的构造活数(如new String(),new Number())进行了对象封装处理才使其拥有了属性和方法。不过日常业务中我们用的最多的也就是字符串与数字或字符串之间的+运算，对于字符串与字符串则是拼接操作，对于字符串与数字，则是将数字默认进行 toString()操作，然后再进行字符串拼接。对于变量之间做+运算，它的隐式转换规则与+前后变量的数据类型有关，规则比较复杂，详细规则可以自行查询。

1. 原生事件原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制（见下面合成事件），但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件，需要在点击非弹窗区域时关掉弹窗，此时我们只能针对document进行原生点击事件监听。由于原生事件需要绑定在真实DOM上，所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作，并且注意要在component

前言日常开发中的业务场景，业务逻辑上常常用到遍历循环，JS中提供了许多对应的API方法，这里不会从零讲解它们怎么用，而是介绍他们的适用用场景和个中区别1. forEach,map, some,fiiter,every这几个是定义在Array.prototype上的数组专属的遍历API，forEach：单纯地遍历每个数组元素进行需要的逻辑处理，无返回值，不可中断遍历map：主要用于根据需求来格式化数组的每个元素，最终返回一个由每次遍历的返回值组成的新数组，不可中断遍历some：主要用于判断是否存

复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。在CSS自定义属性出现之前，CSS变量只能在一些CSS预处理器中使用，如less，scss等。

原文链接：https://blog.csdn.net/hkh_1012/article/details/53453138node.js中的非IO的异步API提供了四种方法，分别为setTimeOut(),setInterval(),setImmediate()以及process.nextTick()，四种方法实现原理相似，但达到的效果略有区别：一、事件循环Event Loop首先，我们需要了解node.js的基于事件循环的事件模型，正是因为它才使得node.js中回调函数十分普遍，也正是基于此，nod

欢迎访问个人博客网站：http://www.zhuxin.club1. 洋葱模型洋葱我们都知道，一层包裹着一层，层层递进，但是现在不是看其立体的结构，而是需要将洋葱切开来，从切开的平面来看，如图 所示：可以看到要从洋葱中心点穿过去，就必须先一层层向内穿入洋葱表皮进入中心点，然后再从中心点一层层向外穿出表皮，这里有个特点：进入时穿入了多少层表皮，出去时就必须穿出多少层表皮。先穿入表皮，后穿出表皮，符合我们所说的栈列表，先进后出的原则。2. 洋葱模型与Node的关系目前比较流行的 Node.js