【React Router】v6 data router 在非组件（或工具方法）中如何优雅的跳转路由
上集回顾如果你还在 v5 ？那么恭喜你：【React Router v5】在非组件（或工具方法）中如何优雅的跳转路由 在 data router 中如何优雅的跳转路由？因为 router 对象返回了 navigate 方法，所以可以直接调用 // history.js export const routes: ReturnType<typeof createBrowserRouter> = createBrowserRouter([ { path: '/', element: <Home />, }, { path: '/login', element: <div>login</div>, }, ]); // Home.js import { routes } from '../history.tsx'; const Home = () => { return ( <div> ...
【React】为什么路由跳转时页面滚动高度不会被重置（保留上个页面高度）？理解 history scrollRestoration 的场景与使用，以及如何使用 React Router 重置和跳转前保留滚动高度
平时开发过程中，使用 react router 等单页应用跳转路由时，会发现当前页面在拥有滚动高度时，跳转的下个页面同样会保留上个页面的滚动高度（保留最小滚动高度），或者刷新、前进后退时仍会保留上次的滚动高度。 在某些场景下，我们需要重置滚动高度，比如列表页进入详情页，相反的情况下又需要保留高度。需要确定浏览器对于滚动的处理，可以先看下，其在原生中的滚动场景表现。 哪些场景浏览器会恢复滚动高度？哪些场景会重置高度？下面内容皆为 Chrome 浏览器对于滚动高度的处理测试，请注意时效性和不同设备及浏览器之间的差距。 前置场景与条件html 中能触发滚动的长列表页和详情页（文档滚动），使用 window.location.href 和 history.back() 或 history.go() 等来测试跳转场景下的滚动条情况。 列表页进入详情页和当前页面刷新时左为使用 a 标签，右为使用 location.href 的资源跳转效果。 ...
【React】在本地 Html 中快速 debug（调试）React 源码
本地构建 React 环境复制需要 debug 的 React development.js 源码至本地，替换引用即可。 reactstart-a-new-react-project <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script...
【React】结合源码和 EventLoop 分析 - 为什么 useLayoutEffect 会阻止 DOM 重绘（而 useEffect 闪烁）？为什么其内部 useState 会“同步”执行？
useLayoutEffectuseLayoutEffect 与 useEffect 类似，区别是 useLayoutEffect 会在重绘之前同步执行。 为什么会闪烁？可以点击文本 effect 和 layoutEffect 来体验两者在更新时的区别。（增加 delay 同步任务，方便调试） 可以发现两者之间已经区别很小了，但是 useEffect 在更新时仍会出现闪烁。 分析useEffect从 performance 面板中可以看到在 click 事件触发后，直到 delay 函数执行完毕，才有了第一次的 Layout 布局计算，此次更新为 click 中的 setState 更新，在后面的 Task 的 Layout 为 useEffect 中的 setState 更新。 useLayoutEffect而点击 useLayoutEffect 只有一次 Layout 计算，且在同一个 Task 中完成。 为什么会等 useLayoutEffect 执行完毕再计算 Layout ？源码部分直接从 commit...
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） 或缓存一些计算结果，而使用 React.memo、useMemo、useCallback 等记忆函数，例如： props 变化导致的 rerender当父组件 rerender 后，若子组件未使用 React.memo，则子组件也会 rerender。然而当子组件使用 React.memo 后，若...
在 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） 新藏时区GMT+6喀什（Asia/Kashgar） 昆仑时区GMT+5:30 使用- name: some step run: echo $env.TIME - name: use actions uses: some...
【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 中的版本不匹配则报错。 删除 node_modulesnpm ci 开始安装之前会移除 node_modules（若存在） 安装依赖npm ci 只能一次安装整个项目，不支持安装单个依赖。如果你的 package-lock.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 配置文件，如果你是“怀旧派”可以将你的环境变量 ESLINT_USE_FLAT_CONFIG 设为 false，但 Implement Flat Config...
使用 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 https://raw.githubusercontent.com/spicetify/cli/main/install.ps1 | iex iwr -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( createProxyMiddleware({ target: 'http://localhost:8001', // 修改 request headers host 为 target changeOrigin:...
最新文章
