首页
学习
活动
专区
圈层
工具
发布

#react

数据提供渲染为 HTML 视图的开源 JavaScript 库

React 中 useCallback 和 useMemo 到底该不该加?从一次列表卡顿排查说起

超哥前端记录

上周排查了一个后台管理页面的卡顿问题,页面里有一个 200 行左右的数据表格,每行都渲染了一个带删除按钮的操作列。用户点击任意一行删除时,整个表格重新渲染,肉眼...

000

别再在 useEffect 里直接写 async 了:清理函数、竞态和依赖项的真实处理

超哥前端记录

React 的 useEffect 里用 async 函数获取数据这个写法,几乎每个项目里都能见到。大多数情况下页面看起来正常,但遇到路由快速切换、搜索框连续输...

100

React 中 useEffect 依赖数组的闭包陷阱与正确使用方式

超哥前端记录

在 React 函数组件中,useEffect 是处理副作用的核心 Hook。很多人习惯把依赖数组当作“触发条件”来用,比如传入一个空数组模拟 componen...

2200

React 中 useState 的闭包陷阱:从事件监听器到定时器的正确写法

用户1839651

在 React 函数组件里使用 useState 时,很多人会碰到一个看似诡异的问题:明明调用了 setCount,但事件回调或定时器里拿到的 count 始终...

2900

React useEffect 依赖数组比较陷阱:为什么对象和函数总是触发重跑

用户1839651

在 React 函数组件中,useEffect 的依赖数组决定了副作用何时重新执行。很多开发者习惯把组件内定义的对象、数组或函数直接放进依赖项,结果发现 use...

2210

React 中 useEffect 依赖数组的三种谎言与真实运行逻辑

用户1839651

很多人第一次写 useEffect 时都会默认“依赖数组就是告诉 React 什么时候重新执行副作用”。这个理解在简单场景下能用,但一旦涉及对象、函数、闭包和并...

10110

React 18 并发渲染下,为什么 useEffect 会执行两次?

用户1839651

在 React 18 的 StrictMode 下,开发环境里组件挂载时 useEffect 会执行两次。这不是 bug,而是 React 为了帮助开发者提前发...

8110

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

用户12771345

上周排查了一个线上问题:一个用 useReducer 管理表单状态的组件,在某个操作后数据明明已经变了,但界面纹丝不动。用 React DevTools 看,s...

10910

如何修复 React 并发模式下 useEffect 重复执行问题

用户1839651

在 React 18 的并发模式(Concurrent Mode)下,组件在开发环境使用 StrictMode 时,useEffect 会执行两次(mount ...

11610

React 中 useState 更新后立刻读取不到新值?聊聊闭包与批处理

超哥前端记录

在 React 函数组件里用 useState 管理状态时,经常会遇到一个让人困惑的现象:调用 setState 之后,当前这次渲染中读到的 state 还是旧...

13010

React useEffect 中清理函数的真实执行时机:一个被忽略的闭包陷阱

用户12771345

最近在排查一个线上问题时,发现一个组件的定时器在卸载后仍然在跑,导致内存泄漏和额外的请求。代码看起来很正常:useEffect 里启动了 setInterval...

13310

React Query 完全指南 !

掘金安东尼

React Query在短短一年内增长了50%,现在已被超过20%的React应用使用。是什么推动了开发者如此迅速地采用它?答案在于React Query如何解...

14010

React 的 use() API 或将取代 useContext

掘金安东尼

多年来,React 开发者习惯使用 useContext 在全局共享状态,而不用把 props 一层层传递下去。虽然这种方式可行,但即将到来的 use() AP...

13310

React 已经改变了,你的 Hooks 也应该改变

掘金安东尼

React Hooks 已经问世多年,但大多数代码库仍然以同样的方式使用它们:用点 useState,过度使用 useEffect,以及大量不经思考就复制粘贴的...

14210

React 受控组件中输入法组合事件的处理陷阱与修复

超哥前端记录

在中文、日文、韩文等输入法环境下,React 的受控输入组件经常出现一个隐蔽却影响体验的问题:用户正在拼音输入时,输入框的内容会被意外重置或光标跳到末尾。比如一...

15010

用 WorkBuddy 编排多工具 AI Agent:从 ReAct 到 Plan-and-Execute 的工程取舍

正直的数据官小瓦

单轮对话的大模型是「答题机器」,而真正能干活的是 Agent——给它一堆工具,它能自己决定先查什么、再算什么、最后做什么。但 Agent 怎么编排,直接决定了它...

23010

为什么你的 React 组件总是重复渲染?深入 useCallback 和 useMemo 的依赖陷阱

用户1839651

在用 React 开发列表和表单时,经常遇到一个现象:父组件状态一变,所有子组件都跟着重渲染,哪怕传给子组件的 props 完全没变。为了避免这种浪费,很多人会...

12610

React 中从 useEffect 里安全地移除全局事件监听:为什么你的回调总是旧值

超哥前端记录

在 React 项目里给 window 或 document 绑定键盘快捷键、滚动监听、点击外部关闭下拉菜单,是再常见不过的需求。很多人会写在 useEffec...

11210

在 React 中 useEffect 依赖了对象导致无限循环,我如何用 useRef 和自定义比较解决

用户12771345

在一个列表页里,需要根据筛选条件请求后端数据,同时支持手动刷新。我把筛选条件存在 filter 对象里,然后在 useEffect 里发起请求,依赖数组写了 [...

13010

在 React 中正确处理异步请求竞态:从 useEffect 到 AbortController

超哥前端记录

搜索框输入防抖、切换 Tab 加载不同列表、路由参数变化后重新拉取数据——这些场景里如果不对异步请求做竞态处理,很容易出现“旧请求覆盖新请求”的 bug。典型表...

15310
领券