React组件之间的通信
React 的组件相对于 Vue 更加的灵活和多样，按照不同的方式可以分成很多类组件： 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)； 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)； 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)； React 中的组件之间的通信方法。 父子组件通信 下面这个案例演示了子传父与父传子通过 props 传递。 父组件 import React, { Component } from "react"; import Header from "./Header"; import Footer from "./Footer"; import Main from "./Main"; class App extends Component { ...
为什么 react 的 setState 要设计成异步的
在使用 React 的类组件时候我们常常会使用 setState 来更新状态，那么 setState 到底是同步的还是异步的呢？ changeMessage() { this.setState({message: "你好哇, 安知鱼"}) console.log(this.state.message); // hello world } 这段代码最终打印结果是 hello world，可见 setState 是异步的操作，我们并不能在执行完 setState 之后立马拿到最新的 state 的结果，那么 setState 一定是异步的吗？ 实践那么 setState 一定是异步的吗？实际上在 React18 之前分为两种情况 在组件生命周期或者 React合成事件中，setState 是异步的。 在 setTimeout 或者原生 dom 事件中（promise 之类的），setState 是同步的。 React18 之前的同步情况 changeMessage() { setTimeout(() => { ...
butterfly控制特定图片懒加载
经常看我博客的同学应该不难发现我的文章顶图偶尔进来以后还要等一会才能出现，还有加载动画的图片偶尔加载不出来，后来经过我一系列的排查发现居然是懒加载的缘故。 观察 network 选项卡可以发现我们需要让启动器改变，不让lazyload.iife.min.js来加载我们的顶图与加载动画的头像。 方案一可以使用 css 的background属性而不使用 img 标签，就可以做到启动器变成对应的 css，从此排除懒加载的影响。 .loading-img { background: url("") no-repeat center center; background-size: cover; } 方案二（推荐）虽然 css 的方式可以做到排除但是这并不是我们所预期的，部分情况为了 seo 我们需要 img 标签且如果有多个特定图片需要指定不太好写 css，于是就产生了方案二。 我们观察butterfly对懒加载的实现可以发现，在themes/butterfly/scripts/filters/post_lazyload.js中第11行左右的lazyload方 ...
为你的博客安装上便携小空调
star 了 2 年 云游君 的小空调项目 我终于在两年后习得真传归来花费了 大概一个下午的时间完成 ✅ 了该项目的 VUE3 重构。 引用站外地址 云空调，便携小空调 云空调，便携小空调 项目地址，欢迎大家 Star 引用站外地址 云空调，便携小空调项目地址 云空调，便携小空调项目地址 相对原项目比起来优势大概就是没有使用任何 UI 框架, 极少的依赖, 这能够让我打包后的体积也仅只有84kb的js, 做到了all in js，且兼容至 ie8。 部署方案如果你和我一样是使用 hexo 的话，那么将变的极其简单。 在你的博客根目录执行以下命令: hexo new page air-conditioner 然后在会生成source/air-conditioner/i ...
我的图床方案
自从写博客以来就一直面临着图床问题，各种各样的图片该存放在哪里，又该如何管理，在我经过不断的探索以后写下了这篇博客 初识图床图床图床，就是用来存放图片的温床，博客内有大量的图片，大量的地方需要使用到图片，优化博客加载方便管理的除了压缩图片的大小之外，首选就是多处使用图片链接，到不同的资源地址去进行加载来完成图片的加载。 网络免费图床可以通过百度图床搜索 🔍 到很多很多各种各样的图床, 在此不做介绍如 SMMS 等图床. 特点 无配置，仅需注册，有些甚至不用注册 ✅ 方便上传，方便管理 ✅ 免费 ✅ 容易跑路 ❌ 图像处理：如裁剪，压缩等 ❌ 图片加载速度不够快 ❌ 稳定性差 ❌ Github 图床大部分同学是没有服务器的，那么就很需要图床来优化自己的仓库内容，毕竟 github 一个仓库大小只能在 1G 左右，一个比较成熟的方案是使用 github + jsd + PicGo 特点 配置较为简单 ✅ 方便上传 ✅ 免费 ✅ 多个仓库可无限容量 ✅ 图像处理：如裁剪，压缩等 ❌ 一个仓库只能 1G❌ 图片加 ...
butterfly魔改本地搜索预览图
butterfly 自带的本地搜索配置方便所以便一直使用至今，不过有一个痛点就是没有搜索预览图，于是为了解决这个问题做了如下尝试。 安装npm install hexo-generator-search --save 修改_config.yml, 添加以下内容 search: path: search.xml field: post content: true 使用在_config.butterfly.yml中开启本地搜索 # Local search local_search: enable: true preload: true CDN: 修改local_search依赖 cdn 项, 修改文件_config.butterfly.yml中最下面 CDN.option.local_search的值为 https://npm.elemecdn.com/anzhiyu-blog@2.1.2/js/search/local-search.js CDN: ... option: # main_css: # translate: ...
解决vite模块化打包
在 vite 环境下开发时，默认是试用 ESM 打包，但是当我开发一个嵌入式应用就需要能做到闭包以防止变量冲突等问题，这个时候就要切换打包方式了，经过我不断的翻看文档，发现只需要在build.rollupOptions.output.format 配置iife即可，因为 vite 底层试用 rollup 构建，所以我们需要告诉 rollup 我们需要使用什么方式来构建。 引用站外地址 roolup官方文档 roolup官方文档 output.formatType: stringCLI: -f/–format Default: “es” Specifies the format of the generated bundle. One of the following: amd Asynchronous Module Definition, used with module loaders like RequireJ ...
butterfly魔改aplayer音乐
魔改有风险, 魔改前注意备份。此篇魔改需一定代码能力。 魔改效果预览 setTimeout(() => { var dogePlayer = new DogePlayer({ container: document.getElementById('player_ebb742fd1f0b5a7b'), userId: 4945, vcode: 'ebb742fd1f0b5a7b', autoPlay: false }); }, 300); 更改 aplayer 依赖修改_config.butterfly.yml中 CDN.option.aplayer_js CDN.option.aplayer_css CDN.option.meting_js 建议将其下载至本地再引入, 博主不保证其可访问性。 aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css apla ...
butterfly魔改关于页面
点击查看参考站点 参考方向教程原贴张洪 Heo张洪 Heo 实际效果 引用站外地址 butterfly关于页面魔改实际效果 butterfly关于页面魔改实际效果 魔改有风险，魔改前注意备份。 添加 about 页面新建 source/about/index.md --- title: 关于 date: 2021-03-30 15:57:51 aside: false top_img: false background: "#f8f9fe" comments: false type: "about" --- 添加 html 结构新建 themes/butterfly/layout/includes/page/about.pug #about-page .author-box .author-img ...
解决 元素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "Object"。 在类型 "Object" 上找不到具有类型为 "string" 的参数的索引签名
问题： 解决 元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “Object”。 在类型 “Object”上找不到具有类型为 “string” 的参数的索引签名 描述： 在写代码的时候，对一个对象做了一个 forEach 循环，然后取到了其每一个 key 对应的 value 值，但是写完之后发现Typescript 报错了，错误内容就是如题，有点奇怪，特此去了解一下 Object.keys(obejct).forEach((key) => { obejct[key] }); // 或者 for (const key in obejct) { // 处理... obejct[key] .... } 解决过程原谅我报错都没有看明白，查了一下之后才知道，原来 key 值的类型不是 string，在 javascript 中是默认给你转好的，而在 Typescript 中则不是，因此要么转，要么声明，要么忽略… 方案一：忽略在 tsconfig.json 中 compilerOptions 里面新增忽略 ...
即刻短文（瀑布流）部署方案
butterfly 即刻短文（瀑布流）部署方案。希望能给各位看客提供魔改思路。 todolist 支持度 图片灯箱 ✅ 多图片多行显示 ✅ 外部链接 ✅ 瀑布流 ✅ 首页滚动 ✅ 快速评论 ✅ 本地修改 yml 发布 ✅ aplayer 单曲音乐 ✅ 插件版本 ❌ 点击查看参考教程 参考洪哥的即刻短文修改而来。参考方向教程原贴heoHexo 的 Butterfly 魔改：即刻短文静态部署版 注意 ⚠️ 该教程仅为博主目前使用的方法, 如需移植还需自行修改 css 变量, 以下为博主自用 css 变量, 可自行修改为自己喜欢的颜色。 /* 颜色 */ :root { --anzhiyu-theme-op: #4259ef23; --anzhiyu-gray-op: #9999992b; --anzhiyu-theme-top: var(--anzhiyu-theme); --anzhiyu-whi ...
Safari浏览器兼容正则表达式零宽断言
最近在做关于界面的数据统计模块过程中要使用到正则表达式匹配 span 元素开头 和 p 标签结尾的字符 于是开心的下了如下正则表达式匹配这串数据 数据内容<p>网站数据概况</p><p><span>0</span><span>4</span></p><p><span>1</span><span>33</span></p><p><span>2</span><span>95</span></p><p><span>3</span><span>103</span></p><p><span>4</span><span>269</span></p><p><span>5</span><span>5523</span></p><p><span>6</span><span>7601</span></p> 正则匹配let num = data ...
