Home

Jotai 是 React 生态中的一个状态管理库，它提供了便捷的 API，使用起来很灵活，下面是通过阅读源码发现的一些实现原理。 Jotai 中的数据（store）通过 memory 保存，和框架没有关系，内部的 store 实例使用了 WeakMap 做 atom 的映射，并且允许存在多个 store 实例，如果需要对不同的 store 对象进行隔离，可以在 React 中使用 jotai 提供的 Provider 组件，但是一般在项目开发中，只会用到一个 store 实例。 useAtomValue 通过 useReducer 来触发 re-render： import { useStore } from 'jotai' // 源码简化版 export function ...

部署 Github Pages 当部署某个项目到 Github Pages 的时候，只需要根据网上的教程操作就可以了。 但是在实际部署完以后发现，在项目中 Readme 的跳转链接中如果带有一些英文字符，则无法正确的解析。 例如： [跳转链接](./跳转链接所在的文件名(这是英文括号).md) 链接的 URL 文件名，在 Github Pages 中点击跳转的话会打开一个乱码的 markdown 页面，出现这种问题的解决方案是把英文字符改成中文字符。 继续测试发现当把后缀名 .md 去掉的话，即使包含英文字符也能正常解析，但是在 Github 中点击该链接就无法打开对应的文件了（因为 .md 被去掉了，当前仓库找不到对应的文件了）。 最后还是选择了通过将英文字符改成中文...

React setState 的时候是怎么去渲染的？ 首先得弄清一个概念，就是 react 和 react-dom / react-native 或者其他的 renderer 包是分开的。react 只提供了 Component, createElement, hooks 等方法，而渲染操作是由 react-dom 去完成的。当我们使用 setState 时，react 把这个处理函数委派给了 renderer, renderer 来执行渲染。 renderer 是怎么和 react 进行通信的？ 在使用 Component 注册组件的时候，renderer 会往当前组件注入一个对应的 updater 对象，在 setState 时会调用 updater 方法的 enqueueS...

在 JavaScript 中，null 和 undefined 都表示值的缺失，但它们在使用上有不同的含义和细微的差异。 1. 语义： undefined: 已声明但尚未分配值的变量为 undefined 。 如果尝试访问对象上不存在的属性，结果为 undefined 。 如果你不提供函数参数的值，默认值就是 undefined 。 在 JS 中，它代表更“原始”的缺失形式，它暗示某些东西甚至还没有初始化。 null: 表示”无值“或“空”的明确赋值。 开发者通常使用 null 来表示对任何对象值的有意缺失。 它不是像 undefined 那样的默认值，...

Node.js 之事件循环与任务队列 Node.js 中的事件队列分为以下几种： 队列名称 举例 timer queue setInterval, setTimeout I/O queue readFile, createFile check queue setImmediate close queue close event Node.js 中微任务队列除了有 Promise, 还有 process.nextTick 微任务队列分为...

所有的”索引类“（Array，String，TypedArray）都添加 .at() 方法 目前已经在 ECMA 2022 中实施，大部分浏览器都已经支持。 动机： 长期以来，编程人员希望能有一种方法可以”负向访问”某一个 JS 数组的元素，就像在 Python 中一样。 例如：通过 arr[-1] 这种方式访问数组的最后一个成员，而不是 arr[arr.leng-1]。 不幸的是，JS 的语法设计使得这种可能性为 0，因为 [] 这种语法不仅仅是 “索引类” （例如 Array，String）有，对象也可以使用这种语法。通过 arr[1] 这种方式访问某个成员，其实就是访问对象上的某个属性，属性的 key 为 “1”，但这种方式仅仅在对象上面才有。 虽然我们可以在代码中写...

问题：在 tailwindcss 配置文件中配置的一些自定义变量，在项目文件中无法引用这个变量，例如： // 在项目中的 .tsx/.js 文件中无法引用这个颜色变量 module.exports = { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { colors: { primary: "#17fd17", }, }, }, } 解决方案： tailwindcss 提供了一种方案，但是这种方案没有 Vite 的实现方式；下面是自己的实现方式。 实现前提： 项目根目录需要使用 ES module 的...

React + Vite + TS 项目中排序 import 使用此方案前： // import 语句排序混乱，不够直观 // 通过手动调整比较耗费时间和精力 import react from 'react' import a from './a' import moment from 'moment' import './style.css' import { Modal } from 'antd' 使用此方案后： // import 语句按照规则排序，清晰明了 import react from 'react' import moment from 'moment' import { Modal } from 'antd' import a from './a' ...