标签:React

共 39 篇文章

React的Portals与事件冒泡

React的Portals与事件冒泡 Portals 是 React 提供的一种强大功能,允许你将子节点渲染到父组件 DOM 层级之外的 DOM 节点中。这在处理模态框、提示框、全

# React # Portals # 事件冒泡
2026-06-02 122 0

React的useReducer与复杂状态管理

React的useReducer与复杂状态管理 当一个组件的状态逻辑开始变得复杂——多个 useState 调用相互依赖、状态更新函数散落各处、业务逻辑难以追踪时,是时候考虑更结构

# React # useReducer # 状态管理
2026-06-01 129 0

React的useMemo与useCallback的依赖数组陷阱

React的useMemo与useCallback的依赖数组陷阱 暴露问题的代码示例 以下代码看似实现了性能优化,实则隐藏了一个严重的依赖数组陷阱。 javascript impo

# React # useMemo # useCallback
2026-06-01 164 0

React useOptimistic在乐观更新中的应用

React useOptimistic在乐观更新中的应用 乐观更新是一种用户体验优化模式。其核心思想是:当用户执行一个可能耗时的操作(如提交表单、点赞、删除列表项)时,立即在界面上

# React # useOptimistic # 乐观更新
2026-05-30 201 0

React setState是同步还是异步?批量更新机制详解

React setState是同步还是异步?批量更新机制详解 直接回答核心问题:setState 本质上总是异步的,但在特定环境下表现出的更新时机不同。React 18 引入的“自

# React # setState # 批量更新
2026-05-17 187 0

React中为什么列表渲染需要key?没有key会怎么样

React中为什么列表渲染需要key?没有key会怎么样 React利用虚拟DOM(Virtual DOM)来提升性能,核心策略是“最小化更新”。当数据变化时,React会生成新的

# React # 列表渲染 # 虚拟DOM
2026-05-13 175 0

React key变化触发组件完全重新挂载的利用技巧

React key变化触发组件完全重新挂载的利用技巧 在React开发中,key属性通常用于列表渲染,帮助React识别哪些元素发生了变化。但你知道吗?key的变化可以作为一种强大

# React # key技巧 # 组件重新挂载
2026-05-10 143 0

React useActionState管理表单提交状态的新Hook

React useActionState管理表单提交状态的新Hook 在React应用中,表单提交是常见交互。传统方式需要手动管理loading、error、success等状态,

# React # useAction # 表单提交
2026-05-09 191 0

React Cache函数在Server Components中的请求去重

React Cache函数在Server Components中的请求去重 在React Server Components中,当多个组件需要相同数据时,可能会发送重复的网络请求,

# React # ServerComponents # Cache函数
2026-05-09 146 0

React Suspense配合use Hook实现数据获取的新模式

React Suspense配合use Hook实现数据获取的新模式 React 18 引入了并发渲染特性,React 19 则进一步锁定了数据获取的新范式。传统的 useEffe

# React # React19 # Suspense
2026-05-07 180 0

React diff算法为什么时间复杂度是O(n)

React diff算法为什么时间复杂度是On React 通过一套极其精巧的启发式算法,将传统树 Diff 算法的 $On^3$ 时间复杂度降低到了 $On$。这一优化是 Rea

# React # diff算法 # 时间复杂度
2026-05-06 159 0

React Server Actions在表单提交中的使用模式

React Server Actions 在表单提交中的使用模式 React Server Actions 允许你在服务端直接运行函数,而无需手动创建 API 路由。这种方式极大地

# React # Next.js # 表单提交
2026-05-05 158 0

React useSyncExternalStore订阅外部数据源保持一致性

React useSyncExternalStore订阅外部数据源保持一致性 React 18 引入了并发特性,允许 React 中断、恢复或放弃渲染。如果在组件渲染过程中读取了外

# React # React18 # 外部数据源
2026-05-04 161 0

React Suspense与lazy实现代码分割的原理

React Suspense与lazy实现代码分割的原理 代码分割的核心在于将庞大的打包文件拆分成多个小的“块”,并在需要时才下载。React 提供了 React.lazy 和 S

# 代码分割 # React # Suspense
2026-05-03 153 0

React lazy与Suspense配合路由实现按需加载页面

React lazy与Suspense配合路由实现按需加载页面 随着前端应用的功能日益丰富,打包后的 JavaScript 体积往往会变得非常庞大。如果用户打开网页时需要一次性下载

# React # 按需加载 # 代码分割
2026-05-02 190 0

React useImperativeHandle自定义暴露给父组件的实例方法

React useImperativeHandle自定义暴露给父组件的实例方法 在 React 开发中,父组件与子组件的交互通常通过 props 传递数据或回调函数完成。但在某些特

# React # 前端开发 # 组件通信
2026-05-01 163 0

React forwardRef转发ref到子组件DOM元素的用法

React forwardRef转发ref到子组件DOM元素的用法 在 React 组件开发中,父组件默认无法直接获取子组件内部的 DOM 元素(如 input、button 或

# React # ref转发 # React组件
2026-04-30 156 0

React useCallback配合memo避免子组件无意义重渲染

React useCallback配合memo避免子组件无意义重渲染 在React应用开发中,父组件的状态更新往往会触发所有子组件的重渲染,即使子组件的props并没有发生变化。这

# React # 性能优化 # 组件优化
2026-04-30 171 0

React startTransition标记低优先级更新避免UI卡顿

在 React 18 中,处理大量数据渲染或复杂计算时,用户输入往往会出现明显的卡顿。这是因为默认的状态更新被视为“紧急”任务,阻塞了浏览器的渲染线程。startTransitio

# React # startTransition # 性能优化
2026-04-29 183 0

React ErrorBoundary为什么捕获不了异步错误

React ErrorBoundary为什么捕获不了异步错误 在使用 React 开发应用时,ErrorBoundary 是处理组件崩溃、防止白屏的最后一道防线。但在实际项目中,你

# React # 错误边界 # 异步错误
2026-04-29 171 0