【web-worker】浅析 useWorker 库如何只需函数方法即可在 worker 内运行；如何区分 Web Socket、Web Worker和Service Worker？
最近在看 useWorker 库的时候发现该 hook 只需传入函数即可运行，虽然说 worker 不经常使用，但是就酱紫直接用不需要一个 js 文件承接？ 来看看 MDN 中如何创建一个 Worker var myWorker = new Worker('worker.js'); 再看看 useWorker 如何使用 useWorker Usageimport React from 'react'; import { useWorker } from '@koale/useworker'; const numbers = [...Array(5000000)].map((e) => ~~(Math.random() * 1000000)); const sortNumbers = (nums) => nums.sort(); const Example = () => { const [sortWorker] = useWorker(sortNumbers); const runSort = async () =>...
【React】理解学习 React 17中的批处理 与 18 批处理
最近在看 React 18 时，发现 18 已经默认将你的状态更新进行批处理了，不需要再像 16、17 内使用 unstable_batchedUpdates 这种 Hack Api 了～ 什么是批处理？批处理是将多个状态更新分组到单个 re-render 内，以获得更好的性能操作。 比如在同一个点击事件内更新两个 state，React 将会把它们分到一个 render 内重新渲染，看下方 demo 内的 console 可体现。 17 Batch Demo：批处理 在多个状态更新的时候，批处理可以避免不必要的重新渲染。然而在旧版本内何时批处理也并不完全一致，比如在 click 内去请求数据后再更新 state，此时 react 则不会批量更新，而是进行两次独立的更新 17 Batch Demo: 不批处理外部事件处理程序（注意 render 次数） 在 React 18 之前，React 只在事件处理程序期间批量更新。默认情况下，React 不会对 Promise、setTimeout、原生事件处理程序（native event...
为何用谷歌（Chrome）浏览器下载PDF时有时预览有时下载？
最近在下载 PDF 时发现谷歌浏览器(104.0.5112.101)有时打开有时预览，这能忍？经过一番百度发现，在隐私设置和安全性 => 网站设置 => 更多内容设置 => PDF文档中可看到相关设置～ 默认预览 PDF 不预览直接下载
【less】Parent Selectors & 和 &&（多个父选择器的用法及回顾）
前言： 温故知新，less 文档 Parent Selectors 复习~ Parent Selectors
【React Router】在非组件（或工具方法）中如何优雅的跳转路由 - 理解 HashHistory 和 BrowserHistory
最近在维护项目时发现一段代码：window.location.href="#/xxx"，乍一看为啥不用 react 提供的路由跳转方式呢？看了一眼文件路径，在 utils 文件内，想了下在这里 history 对象去哪找呢？ Router 由于项目为 Hash 路由，连夜百度了下，确实有相关属性供我们使用 createHashHistory 由之前的 import { HashRouter } from 'react-router-dom'; function App() { return <HashRouter>xxx</HashRouter>; } 改为 import { Router } from 'react-router-dom'; // history 为 react-router-dom 依赖，直接引入即可 import { createHashHistory, createBrowserHistory } from...
处理谷歌浏览器（google Chrome）https 站点将 http 资源自动转成 https - 附全站资源强制转 https
允许谷歌浏览器加载不安全内容 一段代码将站点内所有资源都转为 https 前言 最近在Chrome中遇到了https站点加载http图片资源失败了，新页面打开图片且在火狐中打开网站也能正常显示。仔细看了下接口返回的资源协议是 http 但到了 dom 上变成了 https 了，开始怀疑人生了~ 允许谷歌浏览器加载不安全内容 几经周转终发现，谷歌浏览器版本 84 之后会组织 混合内容 的加载，若要开启 混合内容 的加载可在网址左侧的 查看网址信息 - 网站设置中更改 到此即可访问 http 内容（不推荐长期使用此方法） 一段代码将站点内所有资源都转为https 如上，谷歌浏览器会将https站点内所有的资源默认使用 https，但其他浏览器仍将按资源默认协议请求，可使用 Meta 标签来处理 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> http-equiv该属性定义了一个编译指示指令，这个属性叫做...
vscode 国内直链接下载，提升（加速）下载速度
前排链接：vscode 官网vscode.cdn.azure.cn（替换链接） 废话开始 进入官网获取下载链接 在下载内中右键复制刚刚下载的链接（eg: 谷歌浏览器）可以看到这里的网速是感人~ 新建窗口复制链接做如下替换：az764295.vo.msecnd.net => vscode.cdn.azure.cn old：https://az764295.vo.msecnd.net/stable/da15b6fd3ef856477bf6f4fb29ba1b7af717770d/VSCode-darwin-universal.zipnew：https://vscode.cdn.azure.cn/stable/da15b6fd3ef856477bf6f4fb29ba1b7af717770d/VSCode-darwin-universal.zip 速度起飞
【css-tricks】从 flex 子元素超出父级（容器）宽度，探其原理 flex：1 时 width 的作用
最近遇到 flex 子元素超出父元素的宽度，本想着复制粘贴就算了，但蛮多次遇到在 flex 元素内定义 width 的场景了，这回就不躺平了吧~ 场景一：文本超出省略 很常见的业务场景，比如一段图文描述中，标题做超长处理 超长时，可能会出现 <style> .flex-box { margin: 100px auto; width: 200px; display: flex; border: 1px solid red; column-gap: 10px; background: #7c4dff; } .flex-container { display: flex; column-gap: 10px; background: #0a9caf; color: #fff; } .flex-ellipsis { width: 100%; white-space: nowrap; ...
linux，mac 终端（Terminal）上使用代理（http/https/socks5）提升速度，给 git 一键设置代理提升速度
最近在github clone 项目时那进度婉如龟速，咱能受这气？干他~ mac linux 在终端上通用 Mac 通过网络设置全局代理 设置/网络/高级/代理 Mac 通过终端设置代理 # http_proxy export http_proxy=http://proxyAddress:port # https_proxy export https_proxy=http://proxyAddress:port 示例： export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890 当然在终端这样设置后你关闭终端代理也随之失效且也只在当前终端生效~ 给 Git 设置或取消代理git config --global https.proxy http://127.0.0.1:1080 git config --global https.proxy...
修复 Win 11或10 Xbox Game Bar 录屏截屏打不开灰色等
xbox game bar 按钮是禁用状态困扰蛮久了，算了想bb的，直接上吧 请确保 Xbox game bar 是启动状态 修改注册表修复 xbox game bar cmd 窗口中 运行 regedit.exe 启动 注册表编辑器 找到目录： Computer\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\GameDVR 找到 AppCaptureEnabled，双击将值修改为 1 ，若无AppCaptureEnabled请右键单击该空间并选择New > DROWD (32-bit) Value。将其命名为AppCaptureEnabled win 11 亲测，win 10 未试，祝你成功~源自：https://www.minitool.com/news/windows-11-xbox-game-bar-not-working.html
最新文章
