ShaoKang Blog

人生在勤，不索何获.

loader

描述 对于 TypeScript 项目，我们都会结合 webpack 等构建工具来打包。 在 webpack 中，编译 ts 文件有两种方式。 使用 ts-loader 编译。 使用 babel-loader 编译。 ts-loader 首先安装 ts-loader typescript npm i ts-loader typescript 使用 ts-loade...

Posted by shaokang on May 10, 2023

正则表达式

1. 正则元字符 2. 贪婪与非贪婪模式 元字符 同义表示方法 示例 * {0,} ab* 可以匹配 a 或 abb + {1,} ab+ 可以匹配 ab 或 abbb，但不能匹配 a ...

Posted by shaokang on April 26, 2023

面试经典题

解释一下什么是闭包，它的作用是什么？ 闭包是指一个函数能够访问并操作其外部函数的变量，即使这个外部函数已经执行完毕并被销毁。闭包常常用于实现封装性、模块化和数据私有化等特性。其特点是数据持久化、私有变量管理和实现模块化开发。 什么是事件委托？它有什么好处？ 事件委托是将子节点的事件委托到其父节点或者更高层级的节点上。主要优点：减少事件绑定次数，提高页面性能；动态绑定事件（当子元素动态生...

Posted by shaokang on April 13, 2023

React-Diff

React Diff 是什么 React 通过引入 Virtual DOM 的概念，极大地避免无效的 Dom 操作，使我们的页面的构建效率提到了极大的提升。 而 diff 算法就是更高效地通过对比新旧 Virtual DOM 来找出真正的 Dom 变化之处。 传统 diff 算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，react 将算法进行一个优化，复杂度...

Posted by shaokang on January 9, 2023

Cookie

Cookie 定义 用于服务端辨别用户身份，储存在用户本地的数据。 可以解决客户端与服务端会话状态的问题，这个状态是指后端服务的状态而非通讯协议（HTTP）的状态。 Cookie 存储 域名下的 cookie 最大为 4kb。以 Name=Value 的形式进行存储。 Domain / Path 作用域 Domain 是限制域名，设置为 a.test.com 的话，b.test....

Posted by shaokang on January 9, 2023

React-Fiber

前言 React 16 采用了一个全新的架构 — Fiber，其最大的使命是解决大型 React 项目的性能问题。React 早期的优化都是停留于 JS 层面（vdom 的 create/diff），诸如减少组件的复杂度（Stateless），减少向下 diff 的规模(SCU)，减少 diff 的成本(immutable.js)。React16 则升级到浏览器渲染机制层面, 在 patc...

Posted by shaokang on December 7, 2022

Nodejs-Process

process 对象 官网解释：process 对象是一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。 因为是全局变量，所以无需使用 require()。 而 process 通常用于： 获取进程信息（资源使用、运行环境、运行状态） 执行进程操作（监听事件、调度任务、发出告警） 常用属性 process.env process.env...

Posted by shaokang on November 1, 2022

React hooks & 状态管理

hooks React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的 状态共享以及组件生命周期管理混乱的问题。React Hooks 的出现标志着，React 不会再存在无状态组件的情况，React 将只有类组件和函数组件的概念。 官方文档 userState 状态钩子 useState() 用于为函数组件引入状态 useState 函数入参...

Posted by shaokang on September 21, 2022

input 组件问题

前言 记录近期遇到的一些琐碎小问题 input placeholder 在 Chrome、低版本 firefox 浏览器下不垂直居中的问题 问题复现：单独设置 placeholder 的字体大小、与 input 输入的字体大小不一样，这时会发现在 Chrome 下 placeholder 会出现偏移。 本质应该算是 Chrome 浏览器的 bug。 解决方案： 利用...

Posted by shaokang on September 16, 2022

图片懒加载

前言 图片懒加载是一种网页性能优化的方式，它能极大的提高用户体验。最近面试也被问到该问题，这里特意整理下整个懒加载的过程。 实现原理 懒加载的原理就是预先将图片真实的 src 放在自定义的属性里面（比如 data-src），当图片出现在视口范围内，将自定义的属性（data-src）赋值给 src 属性，完成图片加载。 // 页面初始化时 <img data-src="https...

Posted by shaokang on July 4, 2022

Tags
babel 复习 Node React 工程化 读书笔记 react
About me

Better late than never

✉️kanglover00@outlook.com

Firends Links