首页 文章 精选 留言 我的

文章列表

共 225318 篇
React 状态更新后组件不渲染?从一次诡异的 useReducer 失效说起

React 状态更新后组件不渲染?从一次诡异的 useReducer 失效说起

上周排查了一个线上问题:一个用 useReducer 管理表单状态的组件,在某个操作后数据明明已经变了,但界面纹丝不动。用 React DevTools 看,state 在 reducer 里返回了新对象,日志也打出来了,组件就是不重渲染。最后发现根因不在 reducer 本身,而在于我们同时用了一个外部变量去“辅助”更新条件,导致渲染路径被提前短路。这类问...

MutationObserver 监听 DOM 变化的几个真实坑:从弹窗自动聚焦到 React 组件卸载

MutationObserver 监听 DOM 变化的几个真实坑:从弹窗自动聚焦到 React 组件卸载

在做一个后台管理系统的表单弹窗时,我用 ref 拿到输入框并在弹窗打开后调用 focus(),在本地跑得好好的,结果测试同事点了“新增用户”后光标并没有落在第一个输入框上。排查后发现弹窗内容是通过 v-if 渲染的,nextTick 那一刻 DOM 已经挂载,但有些第三方组件内部又用 v-show 切换了一层 wrapper,输入框实际在下一帧才可见,Chr...

Vue 3 中 watch 和 watchEffect 的刷新时机:flush 参数到底怎么选?

Vue 3 中 watch 和 watchEffect 的刷新时机:flush 参数到底怎么选?

在 Vue 3 的组合式 API 里,watch 和 watchEffect 的 flush 选项经常被忽略,直到某天你发现回调里读到的 DOM 还是旧的,或者父组件传下来的 props 明明变了、子组件里 watch 却晚了一步才执行。这个参数控制的是 watcher 回调相对于组件更新周期的执行时机,默认值是 'pre',也就是在组件重新渲染之前触发。很...

TypeScript 中 as const 与 satisfies 的配合使用:既保留字面量类型又校验结构

TypeScript 中 as const 与 satisfies 的配合使用:既保留字面量类型又校验结构

在写 TypeScript 时经常遇到一种两难:定义一个配置对象或常量映射,希望它的属性值被推断为字面量类型(比如 'GET' 而不是 string),同时又想确保它符合某个接口或约束。直接用类型注解 const config: Config = {...} 会把类型拓宽,字面量丢失;加 as const 能保留字面量,但不会校验结构。TypeScript ...

用 ResizeObserver 监听元素尺寸变化,你还在用 window.resize 吗

用 ResizeObserver 监听元素尺寸变化,你还在用 window.resize 吗

布局经常需要根据容器宽度动态调整内部元素,比如图表库要响应容器尺寸重绘、虚拟列表要根据可视区域高度计算渲染数量、CSS 容器查询的 polyfill 需要精确知道父级尺寸。window 的 resize 事件只反映视口变化,无法感知某个 div 因为 Flex 布局、侧边栏折叠、字体加载或内容增减导致的尺寸改变。过去只能靠 setInterval 轮询 of...

Vue 3 中 watch 和 watchEffect 的刷新时机:从一次表单联动失效说起

Vue 3 中 watch 和 watchEffect 的刷新时机:从一次表单联动失效说起

有一个在 Vue 3 项目里很常见的场景:父组件传进来一个 props.id,子组件需要根据这个 id 去请求详情数据,同时在本地维护一份可编辑的表单副本。某次需求里,表单里有个“数量”输入框,修改数量后要自动计算总价并且把结果同步回一个隐藏字段。代码大概是这样写的:在 watchEffect 里读取 form.count 和 form.price,算出 f...

Node.js 中使用 worker_threads 处理 CPU 密集型任务时,为什么你的接口还是卡住了?

Node.js 中使用 worker_threads 处理 CPU 密集型任务时,为什么你的接口还是卡住了?

有一个后台管理项目需要导出十万条订单数据,每一条都要做金额格式化、时间转换和状态映射。最开始直接在请求处理函数里写了个 for 循环,本地测试几百条数据没问题,上线后只要有人点导出,整个 Node 服务就像被冻住一样,所有接口的响应时间都飙到好几秒。后来把导出逻辑挪到 worker_threads 里,接口是不卡了,但导出任务本身慢得离谱,还偶尔报 ERR_...

CSS :has() 选择器实战:父级反向控制与表单状态联动

CSS :has() 选择器实战:父级反向控制与表单状态联动

过去几年里,CSS 一直缺少一种能根据子元素状态反向选择父级或前序兄弟节点的能力,导致很多常见交互不得不借助 JavaScript 添加类名。例如表单输入框获得焦点后高亮整个字段容器、卡片内图片加载失败时改变卡片边框颜色、选择某个复选框后让说明文字变色。这类需求本质上不是业务状态复杂,而是 CSS 选择器表达力不足。:has() 出现后,浏览器允许在选择器里...

Node.js 中使用 worker_threads 处理 CPU 密集型任务:从阻塞到并行的实践

Node.js 中使用 worker_threads 处理 CPU 密集型任务:从阻塞到并行的实践

最近在做一个图片批量处理的工具,需要把用户上传的几十张图片生成不同尺寸的缩略图。用 sharp 库做 resize 本身很快,但每张图都要重新计算像素、做滤波、压缩,单张 4000x3000 的图转成 200x200 要花 300ms 左右。一开始我直接把循环写在主线程里,结果前端调用接口上传 20 张图后,整个 Node 服务卡住将近 6 秒,健康检查接口...

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册