全部文章
共 1306 篇文章
探索 React 渲染工作原理
渲染简单来说可以分为四个阶段： 1. 渲染被触发执行（通常都是由状态更新所触发的） 2. 渲染阶段 React 会调用组件函数并确定 DOM 应该如何更新 3. 提交阶段 DOM 会被更新以反映当前应用程序状态的变化 4. 浏览器会将更新的 DOM 绘制到屏幕上 组件渲染被触发只会发生在两种场景下： 1. 应用程序第一次运行（initial render） 2. 组件实例的状态更新（re render） 注意，状态发生更新后，渲染并不会...
还原现场 🔍 前端录制用户行为技术方案
目前，在我们的项目中通常会使用各种各样的埋点和监控来收集页面访问的信息，例如点击埋点、PV埋点等，这些埋点数据能够反应绝大部分的用户行为，但是对于一些关注上下文的使用场景而言这些埋点是不够的。 对于 产品 而言，通过点击或PV埋点来判断功能的使用情况有时候不够的，通常需要知道用户的真实使用路径以判断用户使用是否与功能设计所预想的保持一致，从而能够更好地分析用户使用情况并进一步优化和推广。 对于 开发 而言，当我们收到系统异常通知的时候，...
震惊！🐿浏览器居然下毒
发生什么事了 某天，我正在愉快的摸鱼，然后我看到测试给我发了条消息，说我们这个系统在UC浏览器中有问题，没办法操作，点了经常没反应（测试用得iPhone14，是一个h5的项目）。我直接懵了，这不是都测了好久了吗，虽然不是在uc上测得，chrome、safari、自带浏览器等，都没这个问题，代码应该是没问题的，uc上为啥会没有反应呢？难道是有什么隐藏的bug，需要一定的操作顺序才能触发？我就去找了测试，让他重新操作一下，看看是啥样的没反应...
一些react使用小技巧（中）
以下是个人收集总结的一些使用 react 的小技巧第二篇。 五. 高效的状态管理 27\. 永远不要为可以从其他 state 或 props 派生的值创建新的 state state 越多 = 麻烦越多。 每个 state 都可能触发重新渲染，并使重置 state 变得麻烦。 因此，如果可以从 state 或 props 中派生出值，则跳过添加新的 state。 不好的做法：filteredUsers 不需要处于 state 中。 推荐...
✨ feat: 自动给git提交添加emoji 无需手动输入
很多人都用过 ，或者类似的工具，但这些工具都需要靠手动书写、命令行工具、vscode插件来添加emoji，不太方便，本身emoji意义不大只是锦上添花的东西， 本文通过几行简单的自定义脚本来自动添加emoji , 锦上添花的同时没有任何额外负担 不用手动输入 ，根据type自动添加，也可以根据type scope组合 支持用任何工具提交 命令行 GUI图形化 自定义emoji映射 feat(core): 🥇 feat(ui): 🥈...
eslint 9.x 升级或使用指南，eslint.config.js 配置，包含 react、typescript、prettier 等常用配置升级迁移
不再支持 和 版本 名词解释： ： 是 的长期支持版本（维护和安全更新），通常每隔两年发布一次，特点是稳定和可靠性，建议生产使用。 非 （ ）：是 的最新开发版本，通常每隔几个月发布一次，包含最新的功能和实验特性，缺乏稳定性。 配置文件取代 配置 新版 已经取代了 配置文件，如果你是 可以将你的环境变量 设为 ，但 中已经明确表示在下一阶段 中会移除对旧配置文件的兼容。 中支持 和 两种配置文件格式，推荐使用 。 新 Rule： 规则用...
NPM私库搭建-verdaccio（Linux）
linux服务器安装node a)、官网下载所需的node版本 b)、解压安装包 若下载的是xxx.tar.xz文件，解压命令为 c)、修改环境变量 修改：/etc/profile文件 d)、环境变量需重启生效 e)、查看当前node版本 防止报grywarn权限的错 是因为原来的私库崩了 这里直接指明仓库地址为淘宝镜像 文件位置： 如果找不到该文件，需要先运行verdaccio，直接执行verdaccio命令即可。 继续修改配置文件：...
React: 同事见了直夸夸的复合组件模式
在React的开发中，我们经常会遇到这样的场景：组件之间需要共享状态，并且根据用户的交互或业务需求，多个组件需要协同工作。这时，设计出既灵活又可维护的组件结构就变得非常重要。复合组件模式 (Compound Component Pattern) 就是一种很好的设计模式，它允许父组件提供共享的状态，子组件则负责完成具体的任务。 概念 复合组件模式指的是，将一个功能拆分成多个子组件，通过上下文（Context）进行状态共享，父组件负责提供核...
使用 JavaScript 的 SpeechRecognition API 实现语音识别
在现代的 Web 开发中，语音识别已经成为一个非常有用的功能。通过浏览器提供的 SpeechRecognition API，我们可以在网页上实现语音输入的识别功能。本文将介绍如何使用 JavaScript 和 SpeechRecognition API 来实现简单的语音识别功能。 什么是 SpeechRecognition API？ SpeechRecognition API 是 Web 开发中的一项 API，它允许开发者通过浏览器来识...