https://www.neiljistudio.cn 一个前端开发者的长期笔记库：JavaScript、CSS、浏览器、工程化与零散的思考。写代码，也写清楚代码。 zh-CN Thu, 22 Oct 2026 10:44:06 GMT https://www.neiljistudio.cn/blog/react-v17-yuan-ma-xi-lie-yi-wen-gao-dong-usereducer https://www.neiljistudio.cn/blog/react-v17-yuan-ma-xi-lie-yi-wen-gao-dong-usereducer Fri, 07 Mar 2025 00:00:00 GMT 从 ReactCurrentDispatcher 到 mountReducer / updateReducer：拆解 React 17 中 useReducer 的 hook 链表、环形 update 队列与 lanes。 react https://www.neiljistudio.cn/blog/macos-jie-zhu-filezilla-kuai-su-bu-shu-ftp-server https://www.neiljistudio.cn/blog/macos-jie-zhu-filezilla-kuai-su-bu-shu-ftp-server Thu, 13 Feb 2025 00:00:00 GMT 系统：MacOS 15.2 Sequoia 工具：FileZilla Server 19.4(Apple Silicon) 下载系统所适配的FileZilla Server 自行安装 FileZill… filezilla ftp server https://www.neiljistudio.cn/blog/how-react-developer-learn-vue https://www.neiljistudio.cn/blog/how-react-developer-learn-vue Tue, 14 Jan 2025 00:00:00 GMT 本文写于 25 年 1 月，杭州云谷，这两天气候干冷转暖，宜学习，我已断更大半年，恰逢手头无事，就借这个机会写点学习笔记吧。我将尝试以 React 开发者视角，去学习 Vue，找出二者的共性，形成框架… react vue 前端进阶 https://www.neiljistudio.cn/blog/react-ge-ban-ben-te-xing-yi-lan https://www.neiljistudio.cn/blog/react-ge-ban-ben-te-xing-yi-lan Wed, 31 Jul 2024 13:56:00 GMT React 是一个用于构建用户界面的 JavaScript 库，自发布以来经历了多个主要版本的更新，每个版本都引入了新的特性和改进。以下是各主要版本的一些关键特性： 初始版本 : React 0.3 … react https://www.neiljistudio.cn/blog/fu-gai-shi-fa-bu-vs-fei-fu-gai-shi-fa-bu https://www.neiljistudio.cn/blog/fu-gai-shi-fa-bu-vs-fei-fu-gai-shi-fa-bu Sun, 21 Apr 2024 00:00:00 GMT 覆盖式：新版本会覆盖上一个版本； 非覆盖式：每个版本共存； 覆盖式：节省存储空间，但不容易做版本回退； 非覆盖式：占用大量存储空间，无缝切换版本； 覆盖式：强调系统一致性，不接受特定版本的定制、维护；… 前端工程 https://www.neiljistudio.cn/blog/zi-jie-tiao-dong-zhi-bo-xian-mian-shi-er-mian-fu-pan https://www.neiljistudio.cn/blog/zi-jie-tiao-dong-zhi-bo-xian-mian-shi-er-mian-fu-pan Mon, 18 Mar 2024 00:00:00 GMT 1. Webpack 本地构建优化 2. Webpack 联邦模块 3. 除了 redux、mobx，还了解哪些前端状态管理类库 4. 了解哪些基于 redux 二次开发的类库 5. 了解 react… interview https://www.neiljistudio.cn/blog/zi-jie-tiao-dong-zhi-bo-xian-mian-shi-yi-mian-fu-pan https://www.neiljistudio.cn/blog/zi-jie-tiao-dong-zhi-bo-xian-mian-shi-yi-mian-fu-pan Mon, 18 Mar 2024 00:00:00 GMT 1. 自我介绍 2. 两列布局，左定宽，右适应 3. 重排和重绘是什么，如何降低重排重绘的性能开销？ 4. 如何判断一个变量是 Array？ 5. 宏任务和微任务是什么？说出给定异步代码的输出结果（s… interview https://www.neiljistudio.cn/blog/webpack-chang-shi https://www.neiljistudio.cn/blog/webpack-chang-shi Sun, 17 Mar 2024 00:00:00 GMT 1. Loader vs Plugin Loader 用于加载并解析各类文件，如 css / sass / ts / markdown / png 等； Plugin 用于扩展 Webpack 的能力… webpack 前端进阶 https://www.neiljistudio.cn/blog/shu-suan-zai-hui-gu-san-er-cha-shu-chang-jian-suan-fa https://www.neiljistudio.cn/blog/shu-suan-zai-hui-gu-san-er-cha-shu-chang-jian-suan-fa Wed, 26 Jul 2023 15:00:00 GMT 数（据结构）算（法）再回顾，加深记忆抗遗忘。 100. 相同的树 101. 对称二叉树 226. 翻转二叉树 对称二叉树解法一：修改 isSameTree 逻辑，将同侧分支判断改为对称侧分支判断。 对… leetcode https://www.neiljistudio.cn/blog/shu-suan-zai-hui-gu-er-er-cha-shu-chang-jian-suan-fa https://www.neiljistudio.cn/blog/shu-suan-zai-hui-gu-er-er-cha-shu-chang-jian-suan-fa Tue, 25 Jul 2023 15:00:00 GMT 数（据结构）算（法）再回顾，加深记忆抗遗忘。 144. 二叉树的前序遍历 基本规律：二叉树前序遍历结果一定是 [root, left, right] 94. 二叉树的中序遍历 基本规律：二叉树中序遍历… leetcode https://www.neiljistudio.cn/blog/shu-suan-zai-hui-gu-yi-er-cha-shu-xing-zhi https://www.neiljistudio.cn/blog/shu-suan-zai-hui-gu-yi-er-cha-shu-xing-zhi Tue, 25 Jul 2023 14:40:00 GMT 数（据结构）算（法）再回顾，加深记忆抗遗忘。 1. 非空二叉树的叶子节点数，等于度为 2 的节点数加 1； 2. 第 k 层至多有 2^(k − 1) 个节点（每层节点数可构成公比为 2 的等比数列）… leetcode https://www.neiljistudio.cn/blog/ji-yu-cheerio-shi-xian-de-github-contributions-crawler https://www.neiljistudio.cn/blog/ji-yu-cheerio-shi-xian-de-github-contributions-crawler Wed, 19 Jul 2023 12:00:00 GMT github contribution NPM github contribution Github 起因是想在博客上加一个类似 github contribution heatmap 的小组件，用来… app https://www.neiljistudio.cn/blog/shang-hai-qi-pu-le-mian-shi-fu-pan https://www.neiljistudio.cn/blog/shang-hai-qi-pu-le-mian-shi-fu-pan Wed, 12 Jul 2023 00:00:00 GMT 1. 输入数字（单位byte），转为B、KB、MB、GB或TB，单位动态变化。 2. 输入数组，找峰值（大于相邻元素的元素），输出峰值下标，时间复杂度能否优化到对数级。 3. 两颗二叉树是否相同（le… interview https://www.neiljistudio.cn/blog/leetcode-easy-124-er-cha-shu-zhong-de-zui-da-lu-jing-he https://www.neiljistudio.cn/blog/leetcode-easy-124-er-cha-shu-zhong-de-zui-da-lu-jing-he Sun, 09 Jul 2023 00:00:00 GMT 124. 二叉树中的最大路径和 粗略思路：从叶子节点开始，以贪心策略求得局部最大路径和，叶子节点计算完之后，回到父节点，再以同样的贪心策略求得局部最大路径和，重复该过程， 显然这是二叉树的后序遍历 。… leetcode https://www.neiljistudio.cn/blog/leetcode-easy-121-mai-mai-gu-piao-de-zui-jia-shi-ji https://www.neiljistudio.cn/blog/leetcode-easy-121-mai-mai-gu-piao-de-zui-jia-shi-ji Sun, 09 Jul 2023 00:00:00 GMT 121. 买卖股票的最佳时机 题目要求只能在某一天买，之后的某天卖，利润 = 卖的价格 买的价格，让卖的价格最高，买的价格最低，则利润最大，且附加限制条件：先买后卖； 以这样的顺序迭代： 1. 第一天… leetcode https://www.neiljistudio.cn/blog/bei-jing-jian-she-yin-hang-mian-shi-fu-pan https://www.neiljistudio.cn/blog/bei-jing-jian-she-yin-hang-mian-shi-fu-pan Sun, 25 Jun 2023 00:00:00 GMT 一面： 1. 自我介绍 2. js闭包，优缺点 3. es6新特性 4. for...in与for...of 5. 0.1 + 0.2 === 0.3？ 6. http缓存机制 7. 跨域及跨域处理 … interview https://www.neiljistudio.cn/blog/wang-luo-an-quan https://www.neiljistudio.cn/blog/wang-luo-an-quan Tue, 20 Jun 2023 15:10:05 GMT 漏洞：当用户输入的内容发送到服务器，服务器动态生成的页面中会将输入内容拼接进去，而不加任何非法字符验证或过滤； 攻击原理：可以在输入中编写攻击代码（ <script 攻击代码<script/ ），服务… 前端进阶 计算器网络 https://www.neiljistudio.cn/blog/git-ji-ben-zhi-shi https://www.neiljistudio.cn/blog/git-ji-ben-zhi-shi Tue, 13 Jun 2023 00:00:00 GMT 1. git add . ：将工作区修改添加到暂存区； 2. git commit m '...' ：将暂存区修改提交到本地仓库，并添加描述； 3. git remote add origin htt… git 前端进阶 https://www.neiljistudio.cn/blog/wang-luo-xie-yi https://www.neiljistudio.cn/blog/wang-luo-xie-yi Sun, 04 Jun 2023 15:10:05 GMT TCP/IP 四层模型：应用、传输、网络、网络接口； TCP/IP 五层模型（主流）：应用、传输、网络、数据链路、物理； OSI 七层模型： 应用：http、ftp 表示：telnet 会话：dns … 前端进阶 计算器网络 https://www.neiljistudio.cn/blog/typescript-jin-jie https://www.neiljistudio.cn/blog/typescript-jin-jie Thu, 01 Jun 2023 15:10:05 GMT 讲的最好的协变、逆变 T extends U ? T : never ，T如果可以分配给U，则返回类型T，否则返回never； 注意，当T是联合类型时，相当于对T的每种子类型单独应用条件类型，然后再把… typescript 前端进阶 https://www.neiljistudio.cn/blog/react-v17-0-2-yuan-ma https://www.neiljistudio.cn/blog/react-v17-0-2-yuan-ma Wed, 31 May 2023 15:11:19 GMT React 17.0.2 源码走读：Mount / Update 主流程、Work Loop、类组件与函数组件、Hooks 链表与 Scheduler 时间切片。 react 前端进阶 https://www.neiljistudio.cn/blog/react-router-xiang-jie https://www.neiljistudio.cn/blog/react-router-xiang-jie Sun, 28 May 2023 18:29:26 GMT 传统浏览器导航行为就是URL改变时直接向服务器发送请求，服务器响应对应资源，而客户端路由就是URL改变时不再发送请求，而是由客户端部署的App自行匹配URL并展示对应内容。 remix/history… react-router 前端进阶 https://www.neiljistudio.cn/blog/mobx https://www.neiljistudio.cn/blog/mobx Fri, 19 May 2023 14:31:16 GMT 非单一数据源 单向数据流 State Action Derivation Computed value：是一个无参纯函数，输入相同时将直接返回上次缓存的值 Reaction：当State改变时，需要执… mobx 前端进阶 https://www.neiljistudio.cn/blog/redux-xiang-jie https://www.neiljistudio.cn/blog/redux-xiang-jie Wed, 03 May 2023 00:00:00 GMT Redux是一个集中存储和管理全局状态的库，通过reducer纯函数来定义怎样更新state，然后通过dispatch action更新state，state每次更新都要返回一个新对象，也就是说sta… redux 前端进阶 https://www.neiljistudio.cn/blog/chang-jian-ye-wu-zhi-dan-dian-deng-lu-sso https://www.neiljistudio.cn/blog/chang-jian-ye-wu-zhi-dan-dian-deng-lu-sso Thu, 27 Apr 2023 00:00:00 GMT SSO 是 single sign on 的缩写，国内统称单点登录，其实翻译为单一登录更为准确，因为其内涵就是对于多系统的场景下，只进行一次登录即可访问所有子系统资源。 [注]：阅读前需掌握前置知识 … 业务实现 https://www.neiljistudio.cn/blog/lie-biao-xu-ni-hua https://www.neiljistudio.cn/blog/lie-biao-xu-ni-hua Thu, 27 Apr 2023 00:00:00 GMT 列表虚拟化就是只渲染部分列表项，具体思路：两层容器，外层控制可见区域大小，内层计算一个高度（ 列表项数量 列表项高度 ，或 列表项高度累加 ），内层超高会使外层出现滚动条，监听外层容器滚动事件，通过 … react https://www.neiljistudio.cn/blog/gun-dong-jia-zai https://www.neiljistudio.cn/blog/gun-dong-jia-zai Thu, 27 Apr 2023 00:00:00 GMT 一个简单的滚动加载实现：通过Web API IntersectionObserver观察最后一个列表元素，当它出现在可视区域时，解除观察，同时异步地加载数据，并展示一个loading，在加载数据的回调… react https://www.neiljistudio.cn/blog/leetcode-hard-32-zui-chang-you-xiao-kuo-hao https://www.neiljistudio.cn/blog/leetcode-hard-32-zui-chang-you-xiao-kuo-hao Mon, 24 Apr 2023 00:00:00 GMT 32. 最长有效括号 注释比较长，耐心看， 重点一 是看懂dp[i]表示的是什么，那就是从j到i的合法子串长度，0 <= j <= i， 重点二 是j可由等式dp[i] = i j + 1变形求得， … leetcode https://www.neiljistudio.cn/blog/react-ji-chu-zhi-shi https://www.neiljistudio.cn/blog/react-ji-chu-zhi-shi Wed, 19 Apr 2023 13:57:58 GMT 基础API或特性： ClassComponent生命周期（含unsafe） Hooks如何模拟ClassComponent生命周期 useEffect VS useLayoutEffect useRe… react 前端进阶 https://www.neiljistudio.cn/blog/liu-lan-qi-nei-he https://www.neiljistudio.cn/blog/liu-lan-qi-nei-he Thu, 13 Apr 2023 14:08:50 GMT 1. JS解释编译简要过程 源代码通过解析器生成AST（Abstract syntax tree），然后生成字节码（介于高级语言与机器语言之间的中间代码），再通过解释器逐行解释并执行，借助JIT（Ju… 前端进阶 浏览器 https://www.neiljistudio.cn/blog/js-shou-si-dai-ma https://www.neiljistudio.cn/blog/js-shou-si-dai-ma Wed, 05 Apr 2023 00:00:00 GMT 注：改变 this 指向是借助 “形如 obj.foo() 的函数调用，foo 函数在运行时的 this 会指向 obj 的特点”，而为了不覆盖原函数的已有属性，通过 Symbol 定义一个不重复的属… javascript 前端进阶 https://www.neiljistudio.cn/blog/javascript-chang-jian-nei-zhi-dui-xiang https://www.neiljistudio.cn/blog/javascript-chang-jian-nei-zhi-dui-xiang Fri, 24 Mar 2023 17:54:41 GMT Object / Function / Array / String / Promise / RegExp 的常用方法与易错点速查。 javascript https://www.neiljistudio.cn/blog/mian-xiang-dui-xiang-bian-cheng https://www.neiljistudio.cn/blog/mian-xiang-dui-xiang-bian-cheng Mon, 20 Mar 2023 17:28:26 GMT OOP（Object Orient Programming）面向对象编程； 三大特征： 1. 封装，将功能封装进相对独立的模块； 2. 多态，同一接口、类型，却可以做不同的事，代表不同的涵义； 3. … OOP 前端进阶 https://www.neiljistudio.cn/blog/javascript-jin-jie https://www.neiljistudio.cn/blog/javascript-jin-jie Thu, 16 Mar 2023 00:00:00 GMT 定义的函数、类或对象会自动创建原型对象，并通过 prototype 和 constructor 互相指向对方，原型之间通过 proto 构成原型链，实例调用某个方法时，会沿原型链寻找该方法，直到找到指… javascript 前端进阶 https://www.neiljistudio.cn/blog/execution-context https://www.neiljistudio.cn/blog/execution-context Fri, 10 Mar 2023 00:00:00 GMT JS 引擎只确保 Execution Context 描述的机制，但不确保采用什么手段去实现。 首先，Execution Context 是 ECMAScript 语言规范中的抽象概念，它旨在建立一种… 前端进阶 浏览器 https://www.neiljistudio.cn/blog/css-ji-chu https://www.neiljistudio.cn/blog/css-ji-chu Wed, 01 Mar 2023 20:10:00 GMT 盒模型分为四部分： margin box border box padding box content box 标准盒模型（content box）： block 盒子可设置宽高（默认占满父容器宽度）… css 前端进阶 https://www.neiljistudio.cn/blog/chang-jian-web-bu-ju https://www.neiljistudio.cn/blog/chang-jian-web-bu-ju Wed, 01 Mar 2023 20:00:00 GMT 按照元素在文档中的出现顺序与书写方向（write mode），搭配盒模型进行布局。 通过修改元素的position 来实现一些特殊布局效果。 float：none/left/right 用于指定浮动方… css https://www.neiljistudio.cn/blog/html-ji-chu https://www.neiljistudio.cn/blog/html-ji-chu Tue, 28 Feb 2023 15:17:00 GMT 三点：无需编写CSS就可以保持良好的文档结构、有助于SEO、有助于Web Accessibility； 三层：结构层（HTML）、表示层（CSS）、行为层（JS）； <! more 三点：不利于SEO… html 前端进阶 https://www.neiljistudio.cn/blog/leetcode-shua-ti-tao-lu https://www.neiljistudio.cn/blog/leetcode-shua-ti-tao-lu Sun, 26 Feb 2023 00:00:00 GMT 刷题时反复用到的数组、字符串与二叉树套路：滑动窗口、双指针、四种遍历和递归框架。 leetcode https://www.neiljistudio.cn/blog/what-is-web-accessibility https://www.neiljistudio.cn/blog/what-is-web-accessibility Sun, 05 Feb 2023 17:29:17 GMT 国内公司几乎不会考虑Web Accessibility，这与我们的法律有关，我国国内的法律并不强制要求Web Accessibility，但是世界上的部分国家如美国，则出台过508康复法案，制订了若干… Accessibility https://www.neiljistudio.cn/blog/chuang-yu-sui-bi https://www.neiljistudio.cn/blog/chuang-yu-sui-bi Sun, 15 Feb 2015 16:22:00 GMT 寒意未祛的早春下午，我坐在沙发上，在随手丢放的衣服毯子包围中，打开半扇窗户，愣愣地望着窗外出神，许久没有这般安静观察过这方世界了——窗外的世界，雨中的世界。 年少时，我常有强烈的创作欲，尤其是逢着雨天…