【React】结合源码和 EventLoop 分析 - 为什么 useLayoutEffect 会阻止 DOM 重绘（而 useEffect 闪烁）？为什么其内部 useState 会“同步”执行？
useLayoutEffectuseLayoutEffect 与 useEffect 类似，区别是 useLayoutEffect 会在重绘之前同步执行。 为什么会闪烁？可以点击文本 effect 和 layoutEffect 来体验两者在更新时的区别。（增加 delay 同步任务，方便调试） 可以发现两者之间已经区别很小了，但是 useEffect 在更新时仍会出现闪烁。 分析useEffect从 performance 面板中可以看到在 click 事件触发后，直到 delay 函数执行完毕，才有了第一次的 Layout 布局计算，此次更新为 click 中的 setState 更新，在后面的 Task 的 Layout 为 useEffect 中的 setState...
React Compiler - 解放在函数中编程时的性能焦虑（React Conf 2024）附 Next 在线演示
React Compiler在 2024 的 React Conf 上，React Compiler 正式开源了，早在 2021 的 React Conf 上，由黄玄提出的 React Forget（React without memo）概念，后改名为 React Compiler。 注意 React Compiler 目前仍处于实验阶段，需要 React 19 Beta 不建议在生产中使用~。（可观看在 React Conf 中的介绍） https://react.dev/learn/react-compiler 使用场景（为什么要使用？）在平时开发中，我们经常会因为避免不必要或不是预期的 rerender（props、state、context） 或缓存一些计算结果，而使用...
在 github actions 中获取时间，并转换为中国标准时间（中国时区）
使用 GITHUB.ENV 存储时间变量建议将时间变量存入至 GITHUB.ENV 中，方便后续 step 中使用 - name: set time run: | TIME="$(TZ='Asia/Shanghai' date +'%Y-%m-%d %H:%M:%S')" echo "TIME=$TIME" >> $GITHUB_ENV TZ='Asia/Shanghai' 为 中8 时区，可选时区： 哈尔滨 （ Asia/Harbin） 长白时区GMT+8:30上海（Asia/Shanghai） 中原标准时区 GMT+8重庆（Asia/Chongqing） 陇蜀时区GMT+7乌鲁木齐（Asia/Urumqi） ...
【npm】npm ci - npm clean install，在 CI、CD 中保持构建的一致性和可重复性
什么是 npm cinpm ci 与 npm install 类似，主要用于 CI、CD 等自动化环境中，来确保每次安装的依赖项都是相同的。 npm ci 依赖于 package-lock.json 或 npm-shrinkwrap.json，安装之前会删除 node_modules 文件夹（如果存在），若 package-lock.json 中的依赖与 package.json 不一致 npm ci 将会报错退出。 与 npm install 区别 处理 package-lock.json运行 npm ci 必需要 package-lock.json 或 npm-shrinkwrap.json，且不会更新锁文件。在安装时会完全按照 lock 文件版本，若与 package.json...
eslint 9.x 升级或使用指南，eslint.config.js 配置，包含 react、typescript、prettier 等常用配置升级迁移
前言距离 9.0 版本发布已经两个多月了，主流框架或者工具基本都已经适配，一起来体验新版本吧~ Breaking Changes简单列举大家可能会遇到的 change，详情查看官方 release note 不再支持 Node v19.x 和 LTS18.18.0 版本名词解释： LTS：Long-Term Support 是 Node 的长期支持版本（维护和安全更新），通常每隔两年发布一次，特点是稳定和可靠性，建议生产使用。 非 LTS（current）：是 Node 的最新开发版本，通常每隔几个月发布一次，包含最新的功能和实验特性，缺乏稳定性。 Flat 配置文件取代 eslintrc 配置新版 eslint.config.{js,cjs,mjs} 已经取代了 .eslintrc...
使用 Spicetify 自定义 Spotify - 歌词翻译、全屏展示、主题替换
安装 Spicetify安装 Spicetify CLI 和 marketplace（可直接在 Spotify 内更换主题下载插件）。两条命令按序执行。 运行命令过慢或报错？请注意网络环境~ Maccurl -fsSL https://raw.githubusercontent.com/spicetify/cli/main/install.sh | sh # 安装 marketplace curl -fsSL https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.sh | sh Windows - powershelliwr -useb...
在 node 中快速代理请求（Proxy），解决跨域或请求转发问题 - http-proxy-middleware 修改请求体和返回
我是标题代理转发除了 Nginx，大家（前端）可能接触比较多的是 webpack 中的 devServer（webpack-dev-server）。若你 webpack 的 proxy 使用较多的话，那？那别看了~。 原生 http 模块使用快速开箱。所有路径都会转发至 localhost:8001，changeOrigin 为 true 时，会将请求头中的 host 更改为 target url。 const http = require('node:http'); const { createProxyMiddleware } = require('http-proxy-middleware'); const server = http.createServer( ...
解决在 webstorm 或 idea 等 jetbrains 工具中遇到 Git 无法 force push，或 force push 灰色禁用无法点击（protected branches）
结论由于你需要操作的分支可能为 github 或你在 IDE 中设置的受保护分支 解决路径：preference => Version Control => Git => Protected branches或者直接搜索 git，直接删除或修改 Protected branches 值即可
使用 pnpm、turborepo 构建 monorepo 项目，changesets 管理日志和版本详解，从零至 github actions（CI）云端缓存 发布 npm 流程
环境与版本 platform => mac os node => v22.2.0 npm => 10.8.0 pnpm => 9.1.3 yarn => 1.22.22 turbo => 1.13.3 changesets => 2.27.5 请注意文档时效和工具版本，浏览前建议查看官方文档，以获得最新信息！ 前置准备 pnpm 使用 workspaceNode corepack 使用pnpm 切换国内镜像源Turorepo 本文档搭配 corepack 更佳~ 还需要掌握 pnpm 的 workspace 相关知识哦~ 快速开始命令初始化pnpm dlx...
【Node】Corepack - 解决 pnpm 或 yarn 的多版本管理、解决本地版本与 packageManager 中的版本一致性问题
解决 pnpm 版本与 package.json 中 packageManager 中的版本不一致安装项目依赖遇到： ERR_PNPM_BAD_PM_VERSION This project is configured to use v8.15.6 of pnpm. Your current pnpm is v9.1.3？你可以在项目 .npmrc 中这样配置 package-manager-strict=false 当然这只是临时解决方案，特意将此方案前置，若你需要更进一步的了解 corepack 可继续往下~ Corepack https://nodejs.org/api/corepack.html 这是个实验性工具文档，请优先查看官方文档，以获得最新信息！ 文档日期版本： Node.js...
最新文章
