useEffect与useLayoutEffect对比
在 React Hooks 中， 和 都用于处理副作用逻辑，例如订阅、事件监听、DOM 操作等。但它们有着本质性的执行时机差异，这影响到页面渲染、布局抖动、性能表现等关键点。 1\. 执行时机的核心区别 在 React 的渲染流程中： 1. 渲染（Render phase） React 根据 state/props 计算 UI，生成虚拟 DOM，不访问真实 DOM。 2. 提交（Commit phase） React 将虚拟 DOM 变...
在 React 中实现倒计时功能会有什么坑
倒计时 倒计时是一个非常常见的业务场景，但是在 React 中实现起来，却不算简单。 首先我们来看这段倒计时代码，它能否正常执行？ 来看看实际表现效果 可以看到计时器在不断执行，但是 的值却没有变。 这是一个很经典的问题：React 闭包陷阱 。 我们来详细分析下： 的依赖数组 是空的，这意味着 effect 只会在组件挂载时执行一次，而不会在 状态更新时重新执行。所以 回调函数中捕获的 值始终是初始值 。 这个问题解决起来也很简单，有...
React性能优化三剑客：memo、useMemo和useCallback详解
前言 在React开发中，性能优化是一个永恒的话题。今天我们就来深入探讨React提供的三个重要性能优化工具： 、 和 ，它们如何帮助我们构建更高效的React应用。 1\. 为什么需要性能优化？ 🤔 React的核心机制是当组件的state或props发生变化时，组件会重新渲染。但有时这种重新渲染是不必要的： 父组件更新导致所有子组件重新渲染 ，即使子组件的props没有变化 复杂计算在每次渲染时重复执行 ，消耗大量资源 函数引用在...
React 中 useDeferredValue 和 startTransition 的核心区别与使用场景
React 中 和 ，两者都用于优化性能，但适用场景和实现方式不同。 核心概念解析 1\. useDeferredValue：延迟值更新 作用 ：告诉 React 延迟更新某个值 ，直到所有高优先级渲染任务完成。 适用场景 ：当某个值的更新会触发计算密集型渲染（如复杂列表、图表），但需要优先保证其他高优先级 UI（如输入框）的响应。 机制 ： 保持旧值显示，后台计算新值。 计算完成后，用新值更新 UI，期间允许用户继续交互。 示例 ：...
Antd 样式覆盖
目前作者所在的业务正在升级 Antd5.0，不得不说 Antd5.0 真的太香了，但是由于团队的 UE 规范进行了大改版，Antd5.0 所有的 必须对齐最新的规范，因此就需要对 Antd5.0 组件做主题定制。 现状 目前针对项目中使用的 antd 高频组件进行了梳理，并且根据规范基于 design token 对这些高频组件进行样式定制，对于主题色、圆角、边框、字体等用户 高的主题都已经满足团队规范。 虽然 Desig...
React 19 终于发布，一大波新功能正式升级
这篇文章主要介绍了 React 19 的新功能，包括 Actions 自动处理数据突变相关状态，新增的 useActionState、useFormStatus、useOptimistic 等 hook，新的 use API 读取渲染资源，新的 React DOM 静态 API 生成静态站点，以及 React 服务器组件中的 RSC 和 RSA 等内容。同时提到后续会分享针对旧版功能的优化和改良。 关联问题: React 19 性能如何...
React表单：formik、final-form和react-hook-form
表单无处不在，它是每个网站的必备部分。在用React构建web应用时，处理表单是不可避免的。 你可以选择自己的方式来处理，或者选择社区中现成的库。然而，当你选择一个第三方库时，你会立即面临一个问题：有太多的库可供选择。 选择一个库是一件棘手的事情，随意选择一个GitHub上星标多的库并不总是明智的。你肯定需要阅读文档、代码示例，并多次尝试，才能确定这是你想要用于自己项目的库。 对于处理表单，我们有以下选择： | 库名称 | GitHub...
React开发小点：组件为什么需要用标签包裹？return为什么加()？
前言 这次准备介绍关于react的两个新生开发过程中时不时会犯错或者不理解的两个小知识点： React组件为什么需要用标签包裹？ 看这样一段代码： 结果报错了 错误 ：JSX元素必须被一个 包裹 相信不少同学刚开始学习react的时候都编写过类似的代码，但大家有想过为什么会报这样的错吗？以及这样设计的目的是什么？ 不了解也没有关系，接下来让我们一起逐步解密～ 再此之前先来补充 与 的关系 React.createElement与JSX...
React中优雅的插入SVG图标，将SVG文件转换为React组件
在设计稿中我们经常能见到同一种图标不同颜色，如果直接使用IMG标签插入SVG文件的话是没有办法修改颜色的，就要保存多个SVG文件来显示不同颜色。 在react中把SVG文件转换成组件，使用CSS修改SVG颜色。只需加载一个SVG文件，就可以通过CSS展示多种颜色。从而实现减少包体积、减少静态资源请求。 在react中插入SVG 首先安装插件 修改 配置： 调用 控制台 接下来你就可以使用CSS来处理你的svg文件了 在调用过程中如果遇到...