最新 最热

React 里的 ref 到底引用了什么:3 个常踩的坑与正确用法

ref 是 React 跨渲染保管的同一个盒子,改它不会触发重渲染。本文给出 DOM 聚焦、非受控组件、跨组件转发三个最小示例,说清渲染阶段读 ref、拿 ref 驱动渲染、父组件改子组件 ref 三类高频错误的改法。

2026-10-31
147

Zustand 怎样只监听某一个属性的变化:subscribe 怎么用才对

Zustand 里想只监听某一个属性的变化,subscribe 整个 store 会让任何字段变动都触发回调,日志被打爆、性能也浪费。本文用计数器加用户名的例子,讲清 selector、相等性函数与 subscribeWithSelector 中间件三件事,并给出能直接复现的最小代码。读后你能把订阅从全量广播收敛成定向监听,并了解组件外如何取消监听防止内存泄漏。

2026-10-29
183

React 组件性能优化避坑:这 3 个错误最常见,附排查清单

React 应用越写越大后,组件重复渲染和卡顿是最常被感知的问题。本文讲清纯展示组件漏加 memo、渲染里创建新对象导致 memo 失效、昂贵计算放在组件体内三类根因,并给出用 Profiler 量化、useCallback 与 useMemo 的修复写法。照着做就能针对性优化,避免盲目堆缓存。

2026-10-26
158

React 18 自动批量更新为何在定时器里失效:原理与写法

把两个 setState 放进同一个 setTimeout,React 18 只渲染一次,17 会渲染两次。本文用可复制的计数示例复现差异,讲清 createRoot 与旧入口的适用边界、StrictMode 双调用和 flushSync 造成的两次渲染,给出安装、配置、检查到验证的完整排查顺序。

2026-10-25
176

React 条件渲染该用哪种写法:三种写法的取舍与避坑

React 里做条件渲染有短路、三元和提前 return 三种写法,选错不一定报错,却会留下难查的隐患。本文按分支数量给出选择依据,演示 0 被渲染到页面、嵌套三元不可读、子组件状态被卸载丢失三类问题,并说明与 Hooks 调用顺序的冲突边界。

2026-10-25
251

React 父组件调用子组件方法总失败?先看清这 3 个坑

父组件调用子组件方法失败,多半是没转发引用、方法没写进暴露清单,或者调用时机早于挂载完成。本文用一个可运行的最小示例把转发引用、暴露方法、父组件调用三步走通,并给出三种失败分支的判断方式与验证清单。

2026-10-24
225

React 严格模式要不要开:先看这 3 个重复执行的坑

React 严格模式建议在开发环境常开:它只在开发构建生效,用重复执行暴露副作用缺少清理函数和渲染过程不纯两类问题。本文用三段最小代码讲清重复挂载的真实原因、数据请求发两次的竞态处理,以及生产环境不会重复的判断依据。

2026-10-23
666

React 的 prop 是响应式值吗:直接修改 prop 会发生什么

prop 不是响应式状态,而是父组件一次渲染里传下来的只读参数,直接赋值既不报错也不生效。本文用一个计数器例子讲清单向数据流的三条推论,给出状态提升、useState 接初始值、受控组件加回调三种可行写法,并说明 memo 浅比较与对象字段修改造成的假象。

2026-10-22
242

antd Modal 内部组件的渲染时机:几种做法的区别与取舍

antd 的 Modal 默认首次打开才挂载内部组件、关闭也不销毁,表单残留与图表宽度为 0 都源于此。本文用最小示例复现默认行为,对比 destroyOnHidden、forceRender、key 重建与 resetFields 四种方式的差别,并给出表单重置的推荐写法。

2026-10-21
220

React 怎么阻止子组件手势穿透父组件,用错场景反而更麻烦

点击子组件触发父组件是事件冒泡,用 stopPropagation;弹层滑动带动背景是滚动链,用 overscroll-behavior。本文讲清两种穿透的判定方法、合成事件管不到 document 原生监听等三个失败分支的修复办法,以及键盘可访问性的验证要点。

2026-10-20
264