奔跑的小猪仔

原创 js事件循环机制

原创 hook中useContext到底怎么用

总不能从顶层传递一个setstate下来吧,这多麻烦啊, 特别是如果你的项目中组件嵌套很深的情况, 有个简单的方法,就是从context.Provider的value中 pass down 一个 dispatch 函数 from useReducer via context。○ context.Consumer: 另一种比较少用的, 用来消费context变量的方法( useContext出现之前的一种老的读取context的方法, 不推荐使用, 现在推荐用useContext )

原创 不要无脑使用useEffect

如果你要在展示一个列表之前先去过滤出要展示的列表, 你可能想当list改变的时候用个Effect去更新状态,但是当你更新state的时候,react会先调用你的组件函数去计算要展示在屏幕上的内容,并且把这些改变提交的给dom然后重绘,接着react又去跑你的useeffect, 如果你的Effect是立马更新state的,那么就会马上再次渲染重绘一次,为了避免这种情况,应该把这个过滤数据的过程放在组件顶部,这样就会在state更新的时候自动刷新数据,且不会导致重新渲染。

原创 mac安装ps教程

安装教程https://www.yuque.com/u27645736/vctsat/nav2yrq5mnymiaaw?singleDoc#安装链接: https://pan.baidu.com/s/1Y21ry6ZP8EIZ7MKXjyxhyg?

原创 Intersection Observer API探索

我们经常遇到这样的需求——检测一个元素是否可见或者两个元素是否相交，如● 图片懒加载——当图片滚动到可见时才进行加载● 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉● 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况● 在用户看见某个区域时执行任务或播放动画。

原创 vscode常用插件

● Prettier 或 Beautify：格式化代码风格保持一致。并把setting的文件配置成这样。● GitLens：提供丰富的git信息，如在行号旁显示提交作者、点击后查看详细提交历史等。

原创 nvm安装及使用（mac）

nvm（Node Version Manager）是一个用于在不同版本之间轻松切换Node.js环境的工具，特别是在Unix/Linux和macOS系统上。这步会自动在你的文件中添加nvm配置文件. 如果你用的是zsh, 那就是 ~/.zshrc. 如果你用的 bash，那就是 ~/.bash_profile…如果没有自动安装nvm配置文件，你可以自己添加以下内容到你的文件。如果你没有这个文件， 则新建。然后把上面那段放进去。

原创 vscode调试react 最初的源码

webpack 支持 externals 来配置一些模块使用全局变量而不进行打包，这样我们就可以单独加载 react、react-dom，然后把他们导出的全局变量配置到 externals 就行了。不经过 webpack 打包，那就没有 webpack 产生的 sourcemap，不就一次就映射到 React 最初的源码了么。那这么说我们只要让 react-dom.development.js 关联上 sourcemap，就能调试最初的 React 源码了？也就是调试工具只会解析一次 sourcemap。

原创 vscode调试报错crbug/1173575, non-JS module files deprecated.

参考:https://stackoverflow.com/questions/67191286/crbug-1173575-non-js-module-files-deprecated-chromewebdata-index%EA%9E%89530595551。注意server起来后, launch.json的端口号要保持一致。方法: 先npm start 启动服务器。点击debug按钮报错。

原创 前端性能分析工具

前段时间在工作中,需要判断模块bundle size缩减对页面的哪些性能产生了影响, 因此需要了解前端的性能指标如何定义的,以及前端有哪些性能分析工具, 于是顺便整理了一篇笔记, 以供前端小白对性能这块知识点做一个入门级的了解.

原创 addEventListener与useeffect相撞的火花

由于a是在一秒后更新了一次,因此addEventListener函数也只更新了一次,fn里面的loading变量也只更新了一次, 后续loading的更新对fn参数无效, 所以triggerFn依赖变量a还不够,还需要依赖loading变量。发现:监听事件触发的fn,变量a不更新, loading参数不更新, 监听事件的fn为第一次渲染时候的快照,里面的参数后续不更新。两种方式触发fn, 监听事件:addEventListener;则能保证监听事件触发的fn能拿到最新的变量a。如果将上述监听事件改为。

原创 navigator.clipboard API兼容性问题

Firefox 已经支持了 Clipboard API, 但是ClipboardItem和navigator.clipboard.write 函数的优先级在 Firefox上低于 dom.events.asyncClipboard.clipboardItem , 且这个是默认关闭的. 你需要手动打开它, 但是navigator.clipboard.writeText在Firefox上目前是支持的。复制异步获取的数据是不允许的. 同样, 也不能在用户交互触发的Promise中异步使用它。

原创 ***is not a commit and a branch ‘***‘ cannot be created from it 报错

同样,如果你用tag name或者commit hash同样会产生这样的错误,如果git无法解析所提供给特定提交的分支, 通常是因为它没有最新的远程分支列表。同样你也可以指定某个远程,git fetch buildserver,依次来拉取远程buildserver的所有分支。–all tag包含了多个远程, e.g. origin, buildserver, joespc, etc。如果想查看自己的所有远程, 可以执行命令git remote -v。git fetch默认拉去origin这个远程。

原创 Error message “error:0308010C:digital envelope routines::unsupported“

【代码】Error message “error:0308010C:digital envelope routines::unsupported“

原创 conic-gradient

代表中点在x轴50% ,y轴30%, 坡度为0.25turn, 开始渲染后面的三个颜色,conic-gradient方法创建了一个由围绕中心点旋转渐变组成的图片。例如orange 6deg 18deg,表示起始角度是6,结束角度是18。第一个颜色占10度,第二个颜色占350度, 其余的用第三个颜色占据。其中0.25turn为90/360=1/4=0.25。

原创 Clip-Path

借助clip-path,我们可以实现一些复杂的animation动画效果,我们先来简单概述一下它的特性,如MDN所描述的CSS特性 clip-path建立了一个裁剪区域,元素在这个区域中的部分显示出来,在这个区域之外的隐藏起来, 比如我们用clip-path建立了一个圆圈,那么在这个圆圈之内的区域是positive的,而之外的区域是negative的,positive渲染出来,而negative被删除.正是利用这种正空间和负空间之间的关系可以实现动画,从而提供了十分有趣的过渡效果.

原创 下拉加载刷新

/ 没有更多数据了。

原创 react子组件如何传递函数到父组件执行

【代码】react子组件如何传递函数到父组件执行。

原创 关于usecallback的坑

原因就出在useCallback, useback对函数做了一次缓存,如果它的依赖是个空数组,就只会在第一次渲染的时候生成一个handleClick函数,后面的每次都渲染都复用之前的函数,并且用useCallback包住的函数,已经形成了一个闭包,闭包内用了外部的变量, 在函数执行完后,并没有销毁这个变量, 所以再次调用这个函数的时候, 还是用的之前的变量。明明useEffect发生在组件挂载完了之后才执行的,触发handleClick的时候,按理说state已经更新了,

原创 什么时候在在react中使用dangerouslySetInnerHTML

由于 React 使用独立于浏览器的系统来操作 DOM 元素，从而防止与 DOM 直接交互。这将使得在所见即所得编辑器中创建的富文本渲染 HTML标签是很困难的。

原创 前端之localStorage

【代码】前端之localStorage。

原创 vscode终端切换或者并列显示设置

下面的红框表示并列显示的终端,点击可以继续split terminal , 也可以unsplit terminal。上面的红框表示非并列显示的终端,点击可以split terminal。

原创 如何在json文件夹中使用正则表达式

参考文档:https://stackoverflow.com/questions/25426464/regex-pattern-in-json。方法:将转译符号写两次,如下图所示。如果直接像在js中写的话会报错。

原创 react hook

自定义 Hook，可以将组件逻辑提取到可重用的函数中。每次使用自定义 Hook 时，其中的所有state和副作用都是完全隔离的。自定义 Hook 是一个函数，其名称以 “use” 开头(否则React将无法自动检查你的Hook是否违反了Hook的规则)，函数内部可以调用其他的Hook。

原创 关于js默认值

false，undefined，null，NaN，0，“” or ‘’ or `` (empty string)的时候，将不会使用默认值。变量可以先赋予默认值。当要提取的对象对应属性解析为 undefined，变量就被赋予默认值。函数默认参数允许在没有值或undefined被传入时使用默认形参。：使用“｜｜”！

原创 React.createRef/将指定元素滑动到可视区域scrollIntoView()

当组件挂载的时候，React将把DOM元素赋值给current属性，当组件卸载的时候ref为null，ref 在componentDidMount和componentDidUpdate两个生命周期方法执行时发生更新。以及在React elements 上添加ref 属性创建，在构建组件时，ref通常被赋值给instance属性，以便在整个组件中引用它们。当ref在render方法中传递给了一个element后，这个节点的引用在ref的current属性上可访问了。...

原创 判断元素出现在可视区域的方法

它会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时(或者viewport)，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。这样，我们网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理。当以下情况发生时该回调方法会被调用。请留意，你注册的回调函数将会在主线程中被执行。所以该函数执行速度要尽可能的快。缺点事件监听和调用都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。返回一个DOMRect对象，其提供了元素的大小及其相对于视口的位置。.......

翻译 the difference between inline-flex and inline-block in CSS

The main difference between display: flex and display: inline-flex is that display: inline-flex will make the flex container an inline element while its content maintains its flexbox properties.There is only one main difference between the inline-block an

原创 关于css展示图片的一部分花了两个钟这个问题

记录一下自己的低效笨拙的代码经历：利用css展示五角星的一部分like this : 就这个样式，几行代码而已，由于之前写过一遍，但是没有保存，所以第二次写的时候没有想着怎么样实现功能，只是一个劲的去回忆昨天怎么实现的，然而根据回忆却一直无法复现，开始焦虑和不可思议。然后又反复尝试，告诉自己重新思考这个问题，甚至参考已有的代码，但仍然无法实现，我仿佛陷入了一个诅咒中，怎么都逃不出来，于是我开始怀疑自己的智商，就这个简单的问题竟然卡了两三个小时，最后新建一个index.html在最原始的文档里尝试，很快

原创 git报错

git报错集合整理

原创 条件渲染之react高阶组件——HOC

定义：它接受任何输入（多数时候是一个组件）并返回一个组件作为输出。返回的组件是输入组件的增强版本，并且可以在 JSX 中使用。创建一个简单的 HOC，它将一个组件作为输入并返回一个组件。es6的写法使用场景：条件渲染............

原创 PX, EM, REM, %, VW, 和VH的区别

绝对单位相对单位EM: 相对于父元素REM: 相对于根元素 (HTML tag)%: 相对于父元素VW: 相对于视口的宽度VH: 相对于视口的高度与px不同的是，%, EM, REM 更适合用在自适应的情况. 相对单位在不同的设备上可以更好的缩放，因为他们可以根据其他元素的尺寸缩放。由于em是相对父级元素，因此对于嵌套的元素，有时候最终的尺寸会意想不到PX, EM, and REM 主用用于字体尺寸，而 %, VW, and VH 大多数情况用在margins, padding, spacing, an

原创 aplusJS埋点相关知识点总结

aplusJS自动曝光埋点

原创 设备像素比

设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关,设备屏幕的物理像素，任何设备的物理像素的数量都是固定的，单位pt，磅css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)DPR(设备像素比)：设备像素比 =

原创 word写毕业论文总结

ps：一级标题有相关的超链接生成目录在文档中的标题正文设置为相应的格式将鼠标放在要放置目录的地方，点击“引用”，“目录”，选择其中一个模板若标题有变化可以点击引用中的更新目录公式自动编号点开mathtype选择“插入编号”下面的”格式化“，设置你的编号格式，保存，退出点击mathtype选择右编号，如果章节有变化，则点击下图2，表示为下一个章节的地方打了个定点。3 .如果有删除等操作，选择“插入编号”下的更新，更新全部公式标号文献引用先将文献复制进来，并编好号选择”引用“

原创 git报错：fatal: unable to access ‘...‘: Failed to connect to github port 443: Timed out

github报错先检查网络是否连接命令行窗口输入以下命令，确定是否能够解析此域名ping github.com这里说情况一：ping完后显示超时去目录 C:\Windows\System32\drivers\etc 文件下的 修改hosts文件：复制host文件到桌面，在文件新增两行，分别为：140.82.114.4 github.com199.232.69.194 github.global.ssl.fastly.net域名对应的ip地址不一定跟上面一样，应先去[此处]查询.

原创 ubuntu相关命令行

cuda版本：cat /usr/local/cuda/version.txt如果该命令出现错误，去/usr/local/下找cuda的文件夹，里面有version.txt文件显卡驱动版本： cat /proc/driver/nvidia/versionubuntu版本： cat /etc/issue内核版本： cat /proc/version...

原创 如何生成学籍检验报告

在投递中国南方电网的时候需要上传学籍检验报告生成步骤：第一步，访问学信网“学信档案”，使用学信网账号进行登录；第二步，成功登录后，点击顶部菜单中的“在线验证报告”栏目，可申请《教育部学籍在线验证报告》或《教育部学历证书电子注册备案表》中文版。第三步：进入https://www.chsi.com.cn/第四步：打印...

原创 js中的函数参数的引用传值

function changeStuff(a, b, c){ a = a * 10; b.item = "changed"; c = {item: "changed"};}var num = 10;var obj1 = {item: "unchanged"};var obj2 = {item: "unchanged"};changeStuff(num, obj1, obj2);console.log(num);console.log(obj1.item);console.

原创 组合式 API如何解决vue2中mixin的局限性？

Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。// 定义一个mixin objectconst myMixin = { created() { this.hello() }, methods: { hello() { console.log('hello from mixin!') } }}// 定义一个app使用这个 mixinconst app = Vue.createApp({ mixins: [myMix