Reeves'Blog

前言2023年8月，毕业2年后被裁员失业，只能说塞翁失马，焉知非福。 在21年毕业时，React Hook 已经替代了 Class 组件成为官方推崇的主流，平时上班一直想抽空学习 React 的源码，但是零散时间根本没法集中。趁着去年8月失业的这段时间，集中最近看了卡颂老师的React 技术揭秘，本文记录了学习过程中对 React 源码和架构的理解，文中有对原文的直接或间接引用。 2024年1月25日再一次被裁员而失业，但需温故知新，重新出发。 React架构React 15 架构分为两层： Reconciler（协调器）：负责找出变化的组件 Renderer（渲染器） ：负责将变化的组件渲染到页面上 Reconciler 协调器对触发更新进行一系列操作： 调用函数组件、类组件的render方法，将返回的JSX借助babel转换成js然后递归创建虚拟DOM 将虚拟DOM和上次更新时的虚拟DOM对比 通过对比找出本次更新中变化的虚拟DOM 通知Renderer将变化的虚拟DOM渲染到页面上 Render 渲染器接受 Reconciler 通知的更新，重新渲染发生变化的组件 Re ...

否定字符集字符集放置在[]内部，要创建否定字符集，你需要在开始括号后面和不想匹配的字符前面放置插入字符（即^）。 例如，/[^aeiou]/gi匹配所有非元音字符。注意，字符.、!、[、@、/和空白字符等也会被匹配 123let quoteSample = "3 blind mice.";let myRegex = /[^0-9|aeiou]/gi; // 匹配数字以及元音以外的所有字符let result = quoteSample.match(myRegex); 匹配出现一次或多次的字符匹配出现一次或者连续多次的的字符（或字符组）。它可能出现一次或者多次 使用+符号来检查情况是否如此。记住，字符或匹配模式必须一个接一个地连续出现。 例如，/a+/g会在"abc"中匹配到一个匹配项，并且返回["a"]。因为+的存在，它也会在"aabc"中匹配到一个匹配项，然后返回["aa"]。 如果它是检查字符串"abab"，它将匹配到两个匹配项并且返回["a&quo ...

泛型条件类型使用三元运算符，类型A需要满足类型B的约束，返回满足条件的类型，即： 1interface hhh = T extends U ? X: Y; 这里使用extends关键字检查泛型T是否满足泛型U的类型约束，是则返回类型X，否则返回类型Y infer关键词微软ts官方给出的解释原文/译文为： Within the extends clause of a conditional type, it is now possible to have infer declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type. It is possible to have multiple infer locations for the same type variable. infer 关键词常在条件类型中和 extends 关键词一同出现， ...

什么是 W3C？ W3C 指万维网联盟（World Wide Web Consortium） W3C 创建于1994年10月 W3C 由 Tim Berners-Lee 创建 W3C 是一个会员组织 W3C 的工作是对 web 进行标准化 W3C 创建并维护 WWW 标准 W3C 标准被称为 W3C 推荐（W3C 规范） W3C 最重要的工作是发展 Web 规范 为什么要设计规范？主要解决残障人士方便的获得Web内容相关的技术问题并形成解决方案，包括Web信息无障碍的基本原则、实现技术、评估方法等。 为什么要遵循标准？作为生产者实际上只是位于中游，既不是上游的浏览器制造商，他们是标准的真正制定者，也不算是下游，他们是浏览器的终端使用者。这个角色就意味着我们位于一个接口的位置，我们需要想办法满足下游的用户使用上游不同浏览器时看到的是同样的内容。 我们想方设法让我们的页面、我们的程序能够支持所有的浏览器、能够满足尽可能多的用户。我们要满足所有的客户，即使做不到，我们也要满足我们技术范围之内的所有用户。 遵循标准的目的制作一个标准的网站，让使用者感觉不到跟标准有关 W3C代码标准规范内 ...

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 安装使用npm全局安装 npm install webpack webpack-cli webpack-dev-server -g 进入项目根目录进行局部安装 npm install webpack webpack-cli webpack-dev-server 入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 我们在开发环境下的项目根目录中创建webpack.dev.js，对webpack进行出口配置 1234// ./config/webpack.dev.jsmodule.exports = { entry : ...

模块化的好处 避免变量命名冲突 更好的分离 更高的维护性 高可维护性 模块化模式全局模式：直接在js模块文件中声明变量 外界能够随意修改其值，不安全命名空间模式：在js模块文件中均为封装的对象 外界能够随意修改其值，不安全IIFE匿名函数自调用模式(闭包)：js模块文件中使用一个立即执行函数进行包装，在内部暴露相应函数，立即执行的函数参数可以为window 123456(function(window){ function foo(){ //..... } window.model1 = {foo}; // 将函数以对象形式传入到window对象的属性中，等价于{foo：foo}})(window) IIFE增强模式：在IIFE基础上 在立即函数的参数中加入代码依赖，例如使用jQuery 123456789(function(window,$){ function changeBg(){ $('body' ...

数据结构与算法是每一个计算机编程学者的必备知识，在日常生活中，算法无处不在，本文将使用JavaScript实现一些常用的数据结构与算法，例如二叉树的创建以及删除等，以及一些算法的实际应用 队列 使用队列实现约瑟夫环 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061function Queue (size) { this.items = [] this.index = 0 this.maxSize = size}Queue.prototype = { constructor: Queue, enter (item) { if (this.index < this.maxSize) { item !== '' ? this.items[this.index++] = item : console.log(&#x ...

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。 本文部分内容来源于React官方文档 JSXJSX是JavaScript的扩展语法，即 JavaScript XML。在React中使用JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式，且具有 JavaScript 的全部功能，JSX 可以生成 React “元素”。 为什么要使用JSX？ React认为 元素的逻辑和以及UI存在一定的耦合，一些HTML元素与JS的事件操作相连，但是React并没有采用将视图和逻辑处理分离在不同的文件中，而是将视图和逻辑处理一同存放在称之为“组件”的松散耦合的单元内，实现 关注点分离 ，JSX本身也是一种表达式，在最终打包编译时会转换为普通的JS文件 JSX 能有效防止跨站脚本攻击( XSS )，因为在React DOM 渲染所有内容之前都被转换成了字符串 JSX属性使用大括号{}可插入JavaScript表达式，或者使用 ...

MongoDB 数据库：存放集合，可以有多个，不需要手动创建 集合：类似于数组，存放文档，不需要手动创建 文档：数据的最小单位 常用命令 查看数据库占用空间 show dbs 进入到指定数据库 use 数据库名 显示当前所在的数据库 db 显示数据库中所有的集合 show collections 插入数据到某集合中 db.集合名.insert(js对象类型的键值对) 查找集合下的所有文档 db.集合名.find() Mongoosemongoose 是一个对象-文档模型，他对NodeJS原生的MongoDB模块进行了进一步的封装，提供了更多的功能，大多数亲情况下，他被用来把结构化的模式应用到一个集合中 并且提供数据验证和类型转换的功能 为文档创建一个约束使得数据结构合法 使用中间件 更容易驱动 核心对象： Schema（模式对象），约束了集合中的文档结构 Model 将集合作为对象来表示，包含在内的所有文档 Document 表示集合中的一个具体文档对象，每个文档在创建时，都会自动生成一个_id的属性 代码示例，来源于真实项目： 1 ...

前言前段时间看到过一个面试题： 一个页面上有大量的图片（大型电商网站），加载很慢 ，你有哪些方法优化这些图片的加载，给用户更好的体验？ 第一个想到的就是用图片懒加载，但学了这么久JS，在之前做项目时，许多库与插件都自带图片懒加载，就比如说Hexo框架搭建的博客， 但具体实现，经过一番思考，其实很简单 思路这里我们使用H5的自定义属性：data-xxx 存储图片url 将所有图片的url存储在自定义属性中，使用JS监听滚动条事件，并判断每一个图片与浏览器窗口以及滚动条卷去的距离，当<img>标签符合出现在视口的条件时，将存储在自定义属性中的url赋给其src属性（为了简单起见，就不做节流处理了） 代码12345678910111213141516171819202122232425262728293031323334$(function () { // 需要将所有图片的url放在其data-img-url自定义属性中， // 在页面打开的时候变量所有img，并判断他们是否在视口当中，有，则将url放入src中 $('img&#x ...