qq_33490514的博客

最近对公司的项目引入了 nanoid 替换 uuid 的使用。但是在sentry日志中发现Unexpected token =>的错误。立马查看编译后bunld发现 nanoid 箭头函数没有被转换。所以对此记录一下原因和解决办法。报错的原因1.nanoid 源码是没有经过babel转换的。查看nanoid的源码，发现依赖包的代码没有经过babel处理输出的，package.json中直接指向了ES6的源码。2.使用了.babelrc 所以没有对node_modules中依赖进行Babel.

手动批量处理unstable_batchedUpdates 可用于手动批量更新state，可以指定多个setState合并为一个更新请求。import { useState, useLayoutEffect } from "react";import * as ReactDOM from "react-dom";function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(

单元测试某些场景下只想模拟模块中的某个功能，并且保留模块原有的功能。这时候我可以用 jest.requireActual 配合 jest.mock 进行实现。jest.requireActual该API返回实际模块而不是模拟模块，绕过所有有关该模块是否应接收模拟实施的检查。为什么用 jest.requireActual ? 因为jest的mock中是不允许直接使用全局变量，所以我们无法直接import模块包装实现。例子模拟Taro的login APIjest.mock('@tarojs/tar.

React-router的路由系统内部中使用的是 path-to-regexp 解析匹配路由参数。具体用法如下const { pathToRegexp } = require("path-to-regexp")const regexp = pathToRegexp("/:foo/:bar");// keys = [{ name: 'foo', prefix: '/', ... }, { name: 'bar', prefix: '/', ... }] regexp.exec("/test/.

前言最近使用React开发微信H5搜索框自动聚焦功能，发现路由跳转页面后无法自动聚焦。尝试了各种方法均不生效…后来发型是异步加载组件问题，个人估计是微信浏览器在异步组件加载完成后导致节点失焦。尝试过的解决方法input 属性 autofocus —— 不生效ref保存组件处罚 ref.curren.focus() —— 不生效解决方案完整查看了路由注册引入组件的方式，个人认为是异步加载组件的原因。尝试修改为同步引入组件。yes!成功。具体原因需深入调查，先记录以下踩坑原路由注册方式 (异

引用官方的描述：内联缓存（Inline caching）是部分编程语言的运行时系统采用的优化技术，最早为Smalltalk开发。内联缓存的目标是通过记住以前直接在调用点上方法查询的结果来加快运行时方法绑定的速度。内联缓存对动态类型语言尤为有用，其中大多数（如非全部）方法绑定发生在运行时，因此虚方法表通常无法使用。

V8引擎使用的垃圾收集机制是标记清除，那么javascript在垃圾收集会阻塞其他程序执行。V8引擎使用了增量标记的方式进行优化增量标记V8不是直接对整个栈堆遍历标记，而是标记一部分堆后回复正常执行。下次GC将从上一次停止对位置继续进行标记。这样允许在正常执行期间非常短对暂停。...

react-native 应用获取设备网络状态可以使用 NetInfo 包进行获取。NetInfoNetInfo 模块可以获取设备当前的联网状态，可以订阅和一次性获取网络状态。以前在react-native集成，现在已经单独移到 @react-native-community 社区管理。安装(IOS需要pod install)yarn add @react-native-community/netinfo引入模块import NetInfo from '@react-native-.

在浏览器同域名并发请求都产生并发数限制，并发限制通常是4～8以内。那么我们将来了解浏览器请求并发限制的原因和优化手段。浏览器并发数量统计浏览器为什么要请求并发数限制？在了解优化手段之前我们先了解浏览器限制并发请求的原因1.对操作系统端口资源考虑PC总端口数为65536，那么一个TCP（http也是tcp）链接就占用一个端口。操作系统通常会对总端口一半开放对外请求，以防端口数量不被迅速消耗殆尽。2.过多并发导致频繁切换产生性能问题一个线程对应处理一个http请求，那么如果并发数量巨大的话.

Vue 3.0 中使用了 Proxy 对象代理进行拦截实现了数据绑定视图的驱动操作。弥补了vue2.0中的局限，比如属性删除增加监听、对数组基于下标的修改、长度变化等等。参考一下网上流传的机制图Proxy 是什么？首先我们来了解一下Proxy是什么。Proxy不是简单的serverProxy服务器代理，而生ES6中新特性Proxy，我们先看一下MDN官网的说明Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。术语handle.

很简单一个小学算法…圆点坐标：(x0,y0) 半径：r 角度：a0则圆上任一点为：（x1,y1）x1 = x0 + r * cos(ao)y1 = y0 + r * sin(ao )转换成js代码，在javascript中Math.cos Math.sin 需把角度转换为弧度。所以代码如下const x = x0 + pi * Math.cos(a0 * Math.PI / 180)const y = y0 + pi * Math.sin

localeCompare()方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。 新的locales、options 参数能让应用程序定制函数的行为即指定用来排序的语言。 locales 和 options 参数是依赖于具体实现的，在旧的实现中这两个参数是完全被忽略的。var arr = ['南京', '北京', '上海', '杭州', '深圳']; function sortChinese (arr) { // 参数： 排序的数组 arr.sort(fun.

VD 虚拟DOM数据变化，先修改虚拟DOM层，然后通过虚拟DOM树的对比检查获取出最小的修改量进行对真实DOM树进行修改。虚拟DOM模式只是在DOM层的检查，所以初始渲染速度非常快。在细小修改的大量数据修改都是速度也不错的。因为只是在虚拟DOM层的计算对比，然后得出最小的修改操作对真实DOM进行修改。脏检查脏检查MVVM是检查数据的变化，保留对真实节点的操作。脏检查机制是对所有固定 watcher count进行计算变化，所有在小修改变化中慢。但是在全部数据发生更新时候速度远远快于其他模式

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发人员能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。您可以在空闲回调函数中调用requestIdleCallback()，以便在下一次通过事件循环之前调度另一个回调。语法var handle = window.requestIdl.

document.visibilityStatedocument.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：visible : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.hidden : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .pre

Set对象允许存储任何类型的唯一值，无论是原始值还是对象引用。可用于数组，集合去重等操作，拥有size属性const set1 = new Set([1, 2, 3, 4, 5,4]);console.log(set1.has(1));// expected output: trueconsole.log(set1.has(5));// expected output: trueconsole.log(...set1);// expected output: 1,2,3,4,5.

当web Service 和 Manifest 被浏览器安装完后，正常情况下，浏览器会提醒用户可将网页安装到桌面。但是通常浏览器都会限制提醒。这时候我们需要手动唤醒浏览器询问用户是否安装到桌面 beforeinstallpromptbeforeinstallprompt 事件 window.addEventListener('beforeinstallprompt', function(event) { // 监听到可安装事件，进行触发提醒用户 setTimeout(fun.

1.改用 cookie 方式存储数据2.利用 window.addEventListener(‘stroage’) 监听stroage变化事件进行回调共享数据1.全局监听stroage事件通过监听localStroage的数据变化进去读取出token值后进行localStroage删除window.addEventListener('stroage', (e) => { if (e.storageArea === localStroage && e.key === 't

const comment = document.createComment('注释')document.body.appen(commnet)

css 开启硬件加速的系统级控件1.h5在真机上有时候会出现滑动白屏问题，可以开启硬件加速系统级控件进行加速滑屏加速body{ -webkit-overflow-scrolling: touch; overflow: scroll;}2.h5开启动画硬件加速div{ transform: translate(0px); }...

js属于动态类型语言，那么我们如何判断 A实例是否和 b对象实例属于同一类型呢？比如 array === array ，Error === Error，自定义类的实例比较 等等对象类型判断。如果只用 typeof 肯定是不行的。因为不管 array 还是 object、error、或自定义实例类型都是返回 object 。其实我们可以通过对象实例都原型比较是否属于同一个对象类型。Object.getPrototypeOf(obj)方法返回指定对象的原型（内部[[Prototype]]属性的值）。所以.