Hook 产生的动机代码层次更清晰；在类组件中，共属于一个功能的代码分散在各个钩子函数中；更好的状态逻辑复用，renderProps 和高阶组件不是那么好用；干掉 this。Hook 使用规则只能在最外层调用 Hook；不要在循环、条件判断或者子函数中调用（Hook 靠的是调用顺序来确定哪个 state 对应哪个 useState）；只在函数组件中调用 Hook。useStatestate 只在组件首次渲染的时候被创建；在下一次重新渲染时，useState 返回给我们当前的 state。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state。1const[state,setState]=useState(()=>someExpensiveComputation(props));在初始渲染期间，state 与传入的 initialState 值相同；setState 函数用于更新 state，它接收一个新的 state 值并将组件的一次重新渲染加入队列。123456789101112functionCounter({initialCount}){// initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略const[count,setCount]=useState(initialCount);return({cou ...继续阅读 (9)

JSX 与 React 元素JSX 是一个 JavaScript 的语法扩展；在编译之后，JSX 会被 Babel 转为函数调用，对其取值后得到 JS 对象。JSX 使用 camelCase 来定义属性的名称，而不使用 HTML 属性名称的命名约定。对于 React，JSX 仅仅是 React.createElement(component, props, …children) 函数的语法糖；包含在开始和结束标签之间的 JSX 表达式内容将作为特定属性 props.children 传递给外层组件。与浏览器的 DOM 元素不同，React 元素是不可变对象；一旦被创建，就无法更改它的子元素或者属性；一个元素就像电影的单帧：它代表了某个特定时刻的 UI。React 元素是创建开销极小的普通对象；ReactDOM 会将元素和它的子元素与它们之前的状态进行比较，通过 Diff 算法使 DOM 与 React 元素保持一致。组件生命周期当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()static getDerivedStateFromProps()render()componentDidMount()当组件的 props 或 state 发生变化时会触发更新；其生命周期调用顺序如下：static getDerivedStateFromP ...继续阅读 (12)

原始类型（一）：boolean、number、string、void、undefined、null、symbol、bigint123456789101112131415161718// 不是 Boolean，否则会被认为是布尔对象constisOk:boolean=true;// 十进制、十六进制、二进制都是 number 类型constnum:number=666;conststr:string='hahasha';constsym:symbol=Symbol('sym');// JS 安全整数范围有限，可以使用 bigint 类型解决，ES6 也引入了 BigIntconstbigInt:bigint=BigInt(Number.MAX_SAFE_INTEGER)+BigInt(1);// strictNullChecks = trueconsta:void=undefined;// passconsta:void=null;// faultconsta:null=undefined;// faultconsta:undefined=null;// fault// strictNullChecks = falseconsta:void=undefined;// passconsta:void=null;// passconsta:null=undefined;// passco ...继续阅读 (11)

词法作用域传统编译语言的源代码在执行前会经历三个步骤，统称为编译：词法分析，将源代码分解为词法单元；语法分析，将词法单元流转换为抽象语法树（AST）；代码生成，将 AST 转换为可执行代码（一组机器指令）。JS 是一门解释型语言，在执行前也需要进行编译，不过它的编译不是发生在构建前而是在运行时。JS 对变量有两种查询方法：LHS 和 RHS；LHS 用来找到变量本身，RHS 用来查找变量的值。作用域就是查询变量的规则，如果查找的目的是对变量赋值则进行 LHS 查询；如果查找的目的是获取变量的值则进行 RHS 查询。作用域有两种工作模型：动态作用域和词法作用域，JS 采用词法作用域。词法作用域就是定义在词法阶段的作用域，是由变量和块作用域的位置来决定的。动态作用域基于调用栈，是在运行时确定的，this 就像是动态作用域的表亲。欺骗词法作用域：123456789101112131415161718192021222324252627282930functionfoo(str){eval(str);// 欺骗，修改词法作用域并对全局变量 a 进行遮蔽console.log(a);}vara=1;foo('var a = 2');// 2functionbar(str){'use strict';eval(str);// 严格模式下，eval 有自己的作用域，无法欺骗console.log ...继续阅读 (7)

跟着教程走还是比较顺畅的，虽然没有面面俱到，但是入门还是可以的。婴儿学步123456789letparamsArr=process.argv.slice(2);letresult=0;paramsArr.forEach(item=>{consti=item-0;if(typeofi==='number'){result+=i;}});console.log(result);第一个 I/O123456789letfs=require('fs');try{constdata=fs.readFileSync(process.argv[2],'utf-8');constdataStr=data.toString();conststrArr=dataStr.split('\n');console.log(strArr.length-1);}catch(err){console.error(err);}第一个异步 I/O1234567891011121314151617letfs=require('fs');letreadOneFile=file=>newPromise((resolve,reject)=>{fs.readFile(file,'utf-8',(err,data)=>{if(err){reject(err);}resolve(data);});});readOneFile(pro ...继续阅读 (9)

梳理主干流程从浏览器接收 URL 到开启网络请求线程（浏览器的机制、进程与线程之间的关系）；开启网络线程到发出一个完整的 HTTP 请求（DNS 查询、TCP/IP 请求、五层因特网协议栈）；从服务器接收到请求到对应后台接收到请求（负载均衡、安全拦截、后台内部的处理）；后台和前台的 HTTP 交互（HTTP 头部、响应码、报文结构、Cookie 优化、编码解码）；缓存问题，HTTP 的缓存（HTTP 缓存头部、ETag、Catch-Control）；浏览器接收到 HTTP 数据包后的解析流程（解析 HTML、词法分析、DOM 树、CSS 规则树、渲染树、Layout、Paint、渲染、复合图层的合成、GPU 绘制、外链资源的处理、loaded、DOMContentLoaded）；CSS 的可视化格式模型（元素的渲染规则）；JS 引擎解析过程（解释阶段，预处理阶段、执行阶段生成执行上下文、作用域链、回收机制）；拓展（跨域、Web 安全、Hybrid 模式）。从浏览器接收 URL 到开启网络请求线程这一部分展开的内容是：浏览器进程/线程模型，JS 运行机制。一、多进程的浏览器浏览器是多进程的，有一个主控进程，以及每一个 Tab 页都会新开一个进程（某些情况下多个 Tab 会合并进程）；进程可能包括主控进程、插件进程、GPU、Tab 页（浏览器内核）等：Browser 进程：浏览器的主进 ...继续阅读 (3)

Git 大小写敏感问题部署到测试环境时一直打包失败；本地已经没有要提交代码了，但是终端提示文件引用路径错误，找不到对应文件。原来是 Git 忽略了对文件路径与文件名称大小写的检查；太扯了，第一次遇到。解决方法：⌘ + shift + · 显示隐藏文件，找到项目根目录下的 .git 文件夹，里边有一个 config 文件，打开 config，将 ignorecase 的值修改为 false；或者在终端输入 git config core.ignorecase false，回车。配置 proxy 后报 “Invalid Host Header” 错误对接过程中，为了和主站的登录状态保持同步，本地通过 nginx 代理，将项目运行地址指向了 “u.huaban.com”，但项目跑起来以后报 “Invalid Host Header” 错误。CRA 文档提到“进行远程开发时，将进行更严格的主机检查”，文档也给了详细的解决办法。在项目根目录新建 .env.development 文件，文件内容为：1HOST=u.huaban.com;打包时禁止生成 *.mapSourceMap 可以方便我们在控制台对应用进行调试，但准备打包上线的项目，已经经过充分的测试，最重要的是 *.map 真的很大。CRA 在打包时，默认会生成 . ...继续阅读 (15)

什么是递归小时候，我们都听过下面这则故事：从前有座山，山里有个庙，庙里有个老和尚在给小和尚讲故事，讲的什么呢？「从前有座山，山里有个庙，庙里有个老和尚在给小和尚讲故事，讲的什么呢？『从前有座山，山里有个庙，庙里有个老和尚在给小和尚讲故事，讲的什么呢？…』」这个故事自己套着自己，没完没了，像是某种特征在不断地重复，这就是递归了。在计算机科学里，递归指的是一种通过重复将问题分解为同类的子问题而解决问题的方法。套用程序的概念，就是函数执行过程中直接或间接地调用自身。用递归来解决问题由递归的概念可知，如果某个问题有一些自相似的特征，可以分解为子问题，那么它就可以被递归定义。如果问题被递归定义了，也差不多解决了。我们来看一个具体例子：假设现在有 5 个人、5 个座位，那这几个人的位置分布情况有几种。我们先来列举一下：12345第 1 个人：有 5 种选择第 2 个人：有 (5 - 1) 种选择第 3 个人：有 (5 - 2) 种选择第 4 个人：有 (5 - 3) 种选择第 5 个人：有 (5 - 4) 种选择那么 5 个人总共的选择数是：15*(5-1)*(5-2)*(5-3)*(5-4);同理，如果总共是 n 个人、n 个座位，那么所有可能的情况数 f(n) 可以表示为：1f(n)=n*(n-1)*…*2*1这里的未知数 n 有无数种可能，我们不可能把所有的情况都列举出来， ...继续阅读 (7)

Singleton 是什么单例模式是指：一个类仅有一个实例，并且有一个访问点可以访问到这个类；为了实现单例模式，需要在类第一次被调用的时候，将实例保存下来；在这个类被第 n 次调用时，将第一次的实例返回。1234567891011121314letcreateSingleton=(()=>{letsingleton;returnfunction(){if(!singleton){// 将创建的对象保存在闭包里singleton=Object.create(null);}returnsingleton;};})();// 每次调用都指向闭包里的变量 singletonleta=createSingleton();letb=createSingleton();console.log(a===b);// true单例模式的应用：命名空间最简单的单例模式就是以字面量这种形式创建的对象，这种最简单的单例模式可以防止全局变量被污染。1234567// 命名空间可以将同命方法隔离开来，避免被不小心篡改constlxh={speak(){}};constzpp={speak(){}};单例模式的应用：管理模块1234567// f1 ,f2, f3 由命名空间 example 管理constexample=(function(){letf1=function(){};letf2=function( ...继续阅读 (8)

区别attribute 指的是 HTML 的属性，property 指的是 DOM 对象（JS 对象）的属性；非自定义的 attribute 特性与 property 有映射关系，比如：id，class 等；attribute 的值只能是字符串，property 的值可以是任意类型；两者是可以相互影响的。123456789101112131415161718ManWomanconsole.log(document.querySelectorAll('input'));总结可以看到 attribute 只是 DOM 对象的 property 之一，保存着对应元素在 HTML 代码中的所有属性；其中 attribute 的值全部为字符串，而 property 的值可以为字符串、对象、数组、布尔值、null、undefined 等。为了操作 DOM 的简便，除了自定义属性，大部分 attribute 在 property 里都有对应的映射；修改其一等价于修改另一个。其中 for 和 class 为 JS 的保留字，所以 attribute 的 for/class 属性映射到了 property 的 htmlFor/className。因为 attribute 的属性值只能为字符串，所以当我们在 HTML 中加上‘checked=“false”’时，false 会被 ...继续阅读 (8)

原生 DOM 操作 vs 通过框架封装操作这是一个性能 vs 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。针对任何一个 BenchMark，我都可以写出比任何框架更快的手动优化，但是那有什么意义呢？在构建一个实际应用的时候，你难道为每一个地方都去做手动优化吗？出于可维护性的考虑，这显然不可能。框架给你的保证是，你在不需要手动优化的情况下，我依然可以给你提供过得去的性能。对 React 的 VirtualDOM 的误解React 从来没有说过“React 比原生操作 DOM 快”。React 的基本思维模式是每次有变动就整个重新渲染整个应用。如果没有 VirtualDOM，简单来想就是直接重置 innerHTML。很多人都没有意识到，在一个大型列表所有数据都变了的情况下，重置 innerHTML 其实是一个还算合理的操作。真正的问题是在“全部重新渲染”的思维模式下，即使只有一行数据变了，它也需要重置整个 innerHTML，这时候显然就有大量的浪费。我们可以比较一下 innerHTML 和 VirtualDOM 的重绘性能消耗：innerHTML: render htm ...继续阅读 (11)

Array.prototype.sort()sort 方法不能实现随机排序的原因是：当对一个数组进行 n 次排序后，这 n 个数组的第 x 项的平均数并不是无限接近于原数组所有项的平均数。123456789constarr=[1,7,0,5,6,4,2,9,3,8];// [1, 7, 0, 5, 6, 4, 2, 9, 3, 8]console.log(arr.slice().sort((a,b)=>0));// 保持不变// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]console.log(arr.slice().sort((a,b)=>a-b));// 升序// [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]console.log(arr.concat().sort((a,b)=>b-a));// 降序// [3, 6, 5, 2, 9, 7, 1, 0, 4, 8]console.log(arr.concat().sort((a,b)=>0.5-Math.random()));// 伪随机经典洗牌算法123456789101112131415161718functionrandomList(initArr){letlength=initArr.length,tempArr=[],// 保存随机下标resultArr=[];// 保存结果whi ...继续阅读 (6)

浏览器浏览器是多进程的，新开一个 Tab 页其实就是创建了一个浏览器进程；一个进程中包含了多个线程，比如渲染线程、JS 线程、HTTP 请求线程等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。一个浏览器进程通常由以下常驻线程组成：GUI 渲染线程：负责页面的渲染，解析 HTML、CSS，构建 DOM 树，布局和绘制等；与 JS 引擎线程互斥，当执行 JS 时，GUI 渲染会被挂起，当任务队列空闲时，主线程才会去执行 GUI 渲染；HTTP 请求线程：负责执行异步请求一类的函数的线程；主线程执行代码时，遇到异步请求，会交给该线程处理；当监听到状态码变更，事件触发线程会将回调函数加入到任务队列的尾部，等待 JS 引擎线程执行；JS 引擎线程：负责处理 JS 代码；JS 执行时间过长，将导致页面渲染的阻塞；定时触发器线程：负责执行异步定时器（setTimeout、setInterval）的线程；主线程执行代码时，遇到定时器，会交给该线程处理；当计数完毕后，事件触发线程会将计数完毕后的事件加入到任务队列的尾部，等待 JS 引擎线程执行；事件触发线程：负责将准备好的事件处理逻辑交给 JS 引擎线程执行。事件驱动所谓的事件驱动，就是将一切抽象为事件。I/O 操作完成是一个事件，用户点击是一个事件，一个图片加载完成是一个事件；当这些事件发生时对应的代码逻辑就会 ...继续阅读 (3)

九零后天蝎，患有轻度郁闷和重度强迫症，外表肥宅内心戏精，面试会变傻…喜欢拿自己的脸实验各种护肤品，喜欢看欧美烂片、听烂俗音乐…成长经历导致有点孩子气，没办法恋爱，不相信婚姻…不善言辞，性格各色，实在无可救药…来杭多年，积蓄为“淋”…请让我自生自灭…啾咪… ...继续阅读 (10)

Alice 与 Bob 的通信我们以 Alice 与 Bob 一次通信来贯穿全文，一开始他们都是用明文的形式在网络传输通信内容。嗅探以及篡改如果在他们的通信链路出现了一个 Hacker，由于通信内容都是明文可见，所以 Hacker 可以嗅探看到这些内容；也可以篡改这些内容。公众号的文章之前就遇到很多被挟持篡改了内容，插入广告。加密解密既然明文有问题，那就需要对明文进行加密处理，让中间人看不懂内容，于是乎要对原来的内容变成一段看不懂的内容，称为加密，反之则是解密。而本质其实就是一种数学运算的逆运算，类似加法减法，例如发送方可以将 abcd…xyz 每个字母 +1 映射成 bcd…yza，使得原文的字母变成看不懂的序列，而接收方只需要将每个字母 -1 就可以恢复成原来的序列，当然这种做法规律太容易被破解了。对称加密（AES、DES 等）如果对 2 个二进制数 A 和 B 进行异或运算得到结果 C, 那 C 和 B 再异或一次就会回到 A，所以异或也可以作为加密解密的运算。把操作数 A 作为明文，操作数 B 作为密钥，结果 C 作为密文。加密解密运用同一个密钥 B，把这种加解密都用同一个密钥的方式叫做对称加密。Alice 与 Bob 如果能提前拿到一个对称加密的密钥，他们就可以通过加密明文来保证他们说话内容不会被 Hacker 看到了。非对称加密（RSA、DSA 等）刚刚还引发另一个问题 ...继续阅读 (7)