kshao-blog

最近在 GitHub 上”学习”的时候发现了别人在用 MessageChannel，这个 Api 很少见（没见过）基本不了解如何使用，搜了下 发现 React 和 Vue 都使用过~ 这不学习学习跟同事小装一手？ 介绍 Message ChannelMessage Channel 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（例如两个 Iframe，文档主体和 Iframe，worker 之间或 window.open 的窗口）来直接通讯，在每一端使用一个端口（port）通过双向频道（Channel）来传递信息。 Message Channel 是以 Dom Event 的形式发送信息，属于异步的宏任务。 使用 使用 MessageChannel() 构造函数来创建通讯信息，获取两个端口的 Message Port 对象：Port1、Port2 端口之间可以互相通信 端口接受到无法被序列化的消息时，使用 onmessageerror 处理 使用 close 关闭端口 示例const { port1, port2 } = new Messag ...

最近在看 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); cons ...

最近在看 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 handlers）或其他的Re ...

最近在下载 PDF 时发现谷歌浏览器(104.0.5112.101)有时打开有时预览，这能忍？经过一番百度发现，在隐私设置和安全性 => 网站设置 => 更多内容设置 => PDF文档中可看到相关设置～ 默认预览 PDF 不预览直接下载

前言： 温故知新，less 文档 Parent Selectors 复习~ Parent Selectors

最近在维护项目时发现一段代码：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 } ...

允许谷歌浏览器加载不安全内容 一段代码将站点内所有资源都转为 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.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 速度起飞

最近遇到 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; text-overflow: ellipsis; ...

最近在github clone 项目时那进度婉如龟速，咱能受这气？干他~ mac linux 在终端上通用 Mac 通过网络设置全局代理 设置/网络/高级/代理 Mac 通过终端设置代理 # http_proxyexport http_proxy=http://proxyAddress:port# https_proxyexport 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:1080git config --global https.proxy https://127.0.0.1:1080# ...