玄晓乌屋-CSDN博客

原创 nvm for windows 安装低版本 node 丢失 npm 安装

里面介绍了一种骇客的安装。因为安装过程只是丢失了 npm，所以自行下载对应版本的 npm 包进行安装即可。最近换了工作，又开始接触各种祖传屎山。有一个仓库需要 node12 版本，目前已经发展到 node22 了，多个项目之间的 node 不一样，习惯 windows 开发，所以需要装下。但是陈旧的包似乎已经损坏，我在安装 node12，node14 都无法正确安装 npm 包，导致丢失 npm 命令。windows 系统记得下载 zip 包。然后找到 issue。版本对齐看其他人有写。

2025-04-30 17:21:41 711

原创 react 19 useOptimistic 竞争更新乐观值时阻塞

react 19 刚刚出，我在官网上调试这个 useOptimistic api 时，发现了一个竞争调用时的阻塞状态。当连续多次调用 updateFn 参数，且每次更新时间较长时，乐观状态的更新被阻塞了。实际上，第二次和第一次更新已经完成，第三次更新还在进行中。可是乐观更新的结果没办法进行 diff 区分，乐观值被更慢的更新严重阻塞。新 api 还是慎用。

2025-02-08 17:57:37 410

原创概率学笔记一 - 概率 - 随机变量 - 期望 - 方差 - 标准差（也不知道会不会有二）

事件发生的概率结果的总数事件可能发生的个数比如一副标准的 52 张的扑克牌，每张牌都是唯一的，所以，抽一张牌时，每张牌的概率都是 1/52。但是有人就会说了，A 点明明有四张，怎么会是 1/52 的概率。这就需要精准的指出我们计算概率时，到底什么是样本，什么是事件。

2024-09-03 14:33:06 1221

原创理解 aln(x) 为什么等于 ln(x^a)

a⋅lnxlnxa为了方便观看，后续 ln 使用expa⋅expxexpxaxabxab，记作A接着换算lnxexpxxexpxeexpx，记作B当我们把xaxaeexpxa当我们把xaxa由A式得：xaeexpxaea⋅expxeexpxaexpxaea⋅expxa⋅expx。

2024-08-30 16:49:44 854

原创 web 唤起 app 笔记

比如微信内置页面跳转到其他 App，就需要接入微信 sdk，四端都要接：ios、android、server、web。app 内置页面是可以控制浏览器跳转的，所以部分 app 不允许跳转，这些不用考虑。配置完成后的效果：web 可以通过一个 url 直接跳转到 app，app 那边也可以收到完整的跳转并进行后续操作。，例如初始化脚本就跳转，什么方式都不行，比如模拟 a 链接点击，iframe 加载，均不行。，比如用户点击链接，或者用户点击按钮，在事件中使用。换端实际上很坑，要想做到完美的换端几乎不可能。

2024-05-30 15:36:44 1008

原创 vscode 、eslint、prettier 的孽缘

今天在配置一个新项目的时候，被一个新项目搞得头痛。我准备配置 prettier 来格式代码，然后把 prettier 添加到 eslint 规则中，这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样，无论我怎么格式化代码，不是控制台报错，就是 vscode 显示代码标红。最后捋清楚了，原来是 vscode 的 eslint 插件，热更本地配置时没有完全加载成功。vscode 才能让代码视图和控制台一致。

2024-04-27 15:38:43 938 2

原创 js iframe 简易代码沙箱

第二种【解析代码的 dom 结构，替换 iframe 中的 dom】更快，因为直接替换 dom，不会在跑一个 iframe 生命周期，坏处就是上次代码的定时器会在下次代码接着跑，沙箱内部会污染。上面的实现方式中，【把代码转为一个可以访问的地址，让 iframe 指向这个地址】更加干净，每个生命周期不会互相污染，但需要消费额外的 iframe 生命周期计算，不过这其实很快。iframe 实现代码沙箱是一个非常优质的选择，不仅能隔绝代码，最主要的还能隔绝样式。注意要写字符集，不然就炸了。

2024-04-18 17:21:40 1234

原创关于权重插值排序的记录

拖拽中内存占用过大会产生较大的渲染瓶颈，之前有个测试上传了一张 100 MB 的图片，然后一排序就导致页面非常卡顿，这是因为拖拽中很容易进行数据克隆和重绘重排，自己原生实现可以尽量避免，但如果使用三方库，内存泄露就会是很常见的事，拖一下内存占用瞬间拉满，导致十分明显的卡顿。假设权重从 0 开始，有 1 万条数据，把最后一条置顶后权重设置为 0，前面的 9999 条数据的权重就要自增 1，会造成 1 万条数据的更新，IO 成本会变得非常的高。库实现拖拽排序并不困难，市面上已经有很多完善的拖拽库，我常用的是。

2024-03-19 18:26:26 1014

原创记录 taro 坑

我集成了一个全局组件，里面有登录，活动广告等，就想着需要的页面贴一个就行，因为 taro 不能贴到 app.tsx 上嘛，所以我用到的页面都要贴。我在【我的】【首页】两个页面都贴了这个组件，然后里面有段 useEffect 代码，结果我在【我的】页面更新时，还触发了【首页】贴的这个组件的 useEffect，相当于就执行了两次。，不仅不会卸载，之前注册过的 useEffect 依赖改变时，还会执行。我算是明白了，useEffect 就是参考了。来搞的，害死人啊，这玩意儿。

2023-03-29 18:01:46 459

原创 git revert 笔记

但是我一次提交可能几百行代码，处理好多文件，一次恢复的成本太大，真用 revert 进行版本回退，真的鸡肋得不行，也不知道国内什么人把 revert 和版本回退放到一起。它的作用在于保存了撤销历史，对于微小提交的撤销，这是非常不错的，但是用来回退版本，就没意义了，两个版本差异几千甚至几万行代码，几十甚至数百文件，中间几十甚至几百次提交，用 git revert？提交后进行修改了，你要改你就把修改的提交也恢复了，不然就自己处理，可以忽略、取消本次恢复、或自行处理差异，你敢忽略吗？

2023-03-29 12:01:07 854

原创 useQS

Textends。

2023-02-21 13:57:02 404

原创微信工具随记

【代码】微信工具随记。

2023-02-16 16:16:54 307

原创 js 快速生成一个数组小技巧

这种方式不是很友好，改变了数字类型的原型，但是你看到代码绝对很惊艳。此时可以对数字进行解构，拿到长度和数字一样的数组。这是因为数字类型原型上没有迭代器。

2023-01-04 16:39:42 618

原创 js 中使用 encodeURI 把 svg 转 base64

使用 encodeURI 函数把 svg 字符串转义后可以直接拼接到 svg 的 base64 字符串的数据部分。

2023-01-04 15:54:41 2870 2

原创 React 如何根据外部状态进行更新

为了更新的安全和可靠，React的状态一直都比较封闭，不论是早期类组件的this.state，还是 hook 年代的，React 依赖外部数据更新都不是很容易。要使 React 订阅外部数据，外部数据的就需要有数据更新的回调，使得更新能够通知 React。

2022-12-16 18:23:50 1235

原创 h5 微信分享和踩坑指南

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的webapp可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现webapp的页面会导致签名失败，此问题会在Android6.2中修复）。那就重定向咯，我在进入页面直接进行判断是否转义，没转义就重定向到转义后的url上，就这样，才最终好使。...

2022-07-19 11:23:44 1999 6

原创设置 localstorage 定时清除

可以使用 storage-timing 可以设置 localStorage 定时删除。

2022-07-05 17:57:06 2615

原创 react ssr 简单实现

react 的 ssr 最低最低也要把下面几个操作完成：实现时用到的依赖：可以直接全部装上，或者写到哪里装到哪里。既然是服务器端渲染，就要先装个好用的服务器，我用的是 express。创建以下的文件：嗯，再来看看各个文件我都写了啥：tsconfig.json，配置下 jsx 的转化，这段代码是我从 webpack 官网嫖下来的：其实选项没啥用，但是不配置会报错我的 js 文件。然后是 src 内的文件：App.tsx 很简单，就是一个完整的页面组件，不过引入了客户端代码，这个在服务器端没什么..

2022-07-05 11:21:38 975

原创如何更好的在 react 中使用 axios 的拦截器

title: 如何更好的在 react 中使用 axios 的拦截器createAt: 2021-09-28作者：玄晓乌屋备注：转载与借鉴请注明出处。前言axios 算是当下最热门的前端 ajax 处理库，它简单易上手，扩展性强，功能齐全。我之前在 react 中处理 axios 的封装一直没有找到很好的方式，因为 axios 是非常独立，并且提供的各种 api 都是一次性配置，例如 axios.create、axios.defaults，这让 react 对 axios 进行封装异常麻烦.

2021-09-30 01:41:35 1723 2

原创 Chrome CORS 安全策略解决方案

谷歌 CORS 安全策略解决方案针对莫能臣前端同事的日志。问题谷歌在 80 版本的时候使用了 HTTP 响应头属性 SameSite，它用于声明 Cookie 是否仅限于第一方或者同一站点上下文中。简单地说，SameSite 决定了跨域时 Cookie 是否能够存储。按理说这是后端的事，让后端加响应头就行了，但是这个属性在非 https 协议时是强制开启的。这就很麻烦了，线下搞个 https 成本太高。Chrome 在 80 ~ 91 版本时，可以修改浏览器配置关闭此功能。91 版本后浏览器

2021-07-06 18:30:29 1981

原创弹性盒收缩和增长计算

原址点这里弹性盒收缩和增长计算flex-shrink 弹性收缩flex-shrink 用来定义弹性布局中项目的收缩规则，它的计算比较复杂。先有 HTML 结构如下：<section> <div></div> <div></div> <div></div></section>编写以下代码使其成为弹性布局：section { display: flex; width: 400px

2021-06-29 11:57:11 248

原创 Babel 安装、配置和基本使用

原址Babel（一）安装、配置和基本使用Babel 是一款 JavaScript 编译器，它可以把 ECMAScript 2015+ 的代码转译成低版本兼容的代码。作用语法转换：Babel 会转译新版本的 ES 代码，比如箭头函数，解构，模板字符串或者类等。Babel 会把这些新语法转译成较低版本的代码。需要注意的是，Babel 会把 ES 模块转化为 CommonJS 模块，模块转化可以查看此文章。通过 Polyfill 添加缺失的特性，比如 Array.protorype.inclu

2021-06-22 16:59:37 6670

原创使用 vscode 远程编写服务器文件

原址使用 vscode 远程编写服务器文件ssh 支持vscode 远程编写是基于 ssh 实现的，为此我们需要在服务器上安装 ssh 的服务器端，在本机上安装 ssh 的客户端。服务器端安装的 ssh 服务已经很完善，几条命令即可。如果是有 yum 命令，可以使用：sudo yum install sshd;如果有 apt-get 命令，使用：sudo apt-get install sshd;然后使用一下命令开启服务：sudo service sshd start;客户端这边

2021-06-21 14:15:04 391

原创 typescript 使用对象或数组的值或键创建联合类型

前言实际开发中我需要用到太多的键值对，并且有相当一部分情况下，键名是一个联合，而且还是某个数组的联合，然而早期 TS 对这样的联合实现并不是很理想。这几天又翻了翻 Stack Overflow，发现很多新答案，对此整理一下。后面的内容最主要的是针对 TS 增加了字面量常量上下文表达式(Const contexts for literal expressions) 而展开的，所以需了解下它，为了简化，后面简称为常量字面量。常量字面量确定了一个对象或数组的所有子级是只读的，也就是不可修改。比如声明

2021-05-10 18:10:02 10907

原创 react 函数组件暴露方法

场景部分时候希望在子组件中暴露方法给父组件，使用 Class 组件时配合 ref 很容易拿到子组件实例，并且可以执行子组件上的方法。但是函数组件没有组件实例，就算使用 ref 转发，也只会把 ref 转发到内部。hook 推出后，可以使用 useImperativeHandle 来控制转发的 ref。比如：const Chart = (_, ref) => { // 方法暴露 useImperativeHandle( ref, () => ({ doSo

2021-04-30 14:41:41 7602

原创关于 npm 安装各种包较慢的问题

这里写自定义目录标题阿里镜像使用1 cnpm使用2 直接修改 npm 配置使用3 一次性配置代理其他阿里镜像npm 中相关的包在国内没有很好的支持，为此阿里提供了阿里镜像。使用1 cnpm阿里镜像要求大家使用 cnpm 包来安装包，cnpm 安装如下：npm install -g cnpm --registry=https://registry.npm.taobao.org或者使用 alias 指令：alias cnpm="npm --registry=https://registry.np

2021-04-06 15:36:19 464

qq_42881675的博客