React中的flushSync与Vue中的nextTick的比较
中的flushSync与Vue中的nextTick是两种用于处理异步更新的机制。它们在React和Vue这两个流行的前端框架中起着重要的作用。 首先，让我们来看看flushSync。在React中，当需要更新UI时，React会将更新操作放入一个队列中，然后异步地执行这些更新操作。但是有时候，我们希望立即执行这些更新操作，而不是等待异步执行。这时就可以使用flushSync。flushSync会立即执行队列中的所有更新操作，确保更新是同...
基于 Next.js14的前端工程完整搭建
大家好，这篇文章主要是介绍基于nextjs14 搭建项目基础的最佳实现，并持续更新中，其中路由采用的是官方推荐的 APP router 模式，那咱们话不多说直接上干货。 项目地址： 线上地址： 环境 Next.js 14版本对于Node.js最低的版本要求是 18.17.0 。同时也建议大家 node 版本的选择最好选择双数版本，众所周知 nodejs 的单数版本维护周期较短。同时如果同时有很多项目需要维护建议大家用 nvm 或者 vo...
简单的console.log不要再用了
1\. 需求分析 一般情况下，我们在项目中进行代码调试时，往往只会在逻辑中使用 进行控制台打印调试。 这种方式虽然比较常规直接，但是如果打印数据多了，就会导致你的控制台消息变得异常混乱。 所以，我们有了更好的选择，那就是 对象提供的其它API，来让我们能够更清晰的区分打印信息。 2\. 实现步骤 2.1 console.warn 当我们需要区分一些比较重要的打印信息时，可以使用 进行警告提示。 2.2 console.error 当我们...
Next.js渲染方式
几种渲染方式比较 1. SSG（Static Site Generation 静态站点生成）： 在构建时生成页面的静态 HTML 文件，并将其预先存储在服务器上。这样，当用户请求页面时，服务器可以立即提供预先生成的 HTML 内容，而无需动态地生成页面。SSG 可以大大提高网站的性能和加载速度，并且非常适用于内容不经常更改的静态页面。在 Next.js 中，可以通过 函数实现静态站点生成。 2. SSR（Server Side Rend...
介绍React Fiber架构的原理和工作模式
首先，我们先聊聊React的基本组成：当我们写React组件并使用JSX时，React在底层会将JSX转换为元素的对象结构。例如： 上述代码会被转换为以下形式： 为了将这个元素渲染到DOM上，React需要创建一种内部实例，用来追踪该组件的所有信息和状态。在早期版本的React中，我们称之为“实例”或“虚拟DOM对象”。但在Fiber架构中，这个新的工作单元就叫做Fiber。 所以，在本质上， Fiber是一个JavaScript对象...
你知道移动端适配吗
自适应：根据不同的设备屏幕大小来自动调整尺寸、大小 响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应 目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图： 当我们针对一个手机进行布局设计时，设置了一个 200 200 大小的盒子 但在不同的设备上，由于逻辑像素不同的问题，会使得这个盒子在更大的视口上显得很小，在更小的视口上显示很大 因此我们需要进行适配 让它在不同设备...
缩小 macOS 菜单栏各个图标之间的间距
新款的 Macbook 都有刘海，现在有一些软件可以隐藏刘海，但是缩小了一点屏幕的高度，当年苹果说这点高度是他们“送”给用户的。还有一些小工具，可以隐藏部分图标，但是如果要使用隐藏的图标，那就要两步动作。 今天看到一篇 ，可以缩小每个图标之间的间隔，这样就可以显示更多的图标，如果图标非常多，那还是会被刘海挡住的，我们先来看看效果。这是 自带的命令，无需安装第三方工具。 这是缩小图标间距之前，看不到 notion 的图标： 这是缩小图标间...
无限试用GitLens的方案
最近看到GitLens这个插件，试了下，感觉极好。但是付费提示很烦，这极不好。 查了下，看到GitLens是以MIT协议开源的，那么有没有可能无限试用这个插件？ 开干！ 首先clone一下整个项目： 下载node.js（目前项目推荐为node18）并暂时加入PoweShell路径（建议管理员模式执行以防止报错）： 如果你网络不佳，可以： 安装yarn： 切换到先前clone的文件夹，并执行： 我这里报错Sharp这个模块装不上报无法解决...
Git Worktree 的使用
官方介绍地址： 对于 git worktree 的使用场景，我们举个例子说明。 如果我们正在进行重构代码，老板突然要求我们立即修复某些问题。通常我们可能会使用 git stash 来临时存储相关更改，但是此时工作树会处于这样一种混乱状态(有新增的、被移动的、被删除的文件，以及其他的修改)。一个不注意，我们就会打乱 git stash 中的文件，此时我们原本的修改或者 Git 管理有可能就会出现问题。 如果我们希望在不影响现有更改的前提下...