99% 的前端开发者忽略了这个 React 性能利器

在 React 开发中，开发者们在组件渲染方法（特别是在列表渲染 map 函数中）使用闭包（Closures）时，几乎不会多想。

但你知道吗？有一个未被充分利用却功能强大的替代方案，它能提升性能、增强代码可读性，甚至能更好地与工具集成？

让我们来聊聊 HTML 的 data-* 属性：这个前端开发者很少使用，却值得重新审视的特性。

❓ 什么是 data-* 属性？

HTML 的 data-* 属性允许你在 DOM 元素中嵌入自定义数据。在原生 HTML 中：

html 复制代码

<div data-user-id="123" data-role="admin">John</div>

在 React 中，用法如出一辙：

jsx 复制代码

<div data-user-id={user.id} data-role={user.role}>
  {user.name}
</div>

在事件处理函数中，可以通过 dataset 对象访问它们：

javascript 复制代码

e.currentTarget.dataset.userId; // 注意：属性名会转换为驼峰式 (userId)

🧠 常见模式：.map() 中的闭包

假设你正在渲染一个项目列表：

jsx 复制代码

{items.map((item) => (
  <button key={item.id} onClick={() => handleClick(item.id)}>
    {item.name}
  </button>
))}

这种方式简洁明了，易于编写，效果也不错。

然而，其背后的问题是： 在每次渲染时，你都在为列表中的每个项目创建一个新的函数（一个捕获了 item.id 的闭包）。

在大多数应用中，这可能没有显著影响。但是...

⚠️ 闭包的潜在弊端

虽然闭包是 JavaScript 和 React 的核心概念，但在 .map() 中使用它们可能带来以下问题：

不必要的重渲染 (Unnecessary Re-Renders):
如果你使用了 React.memo、React.useCallback 或虚拟化列表（如 react-window），新创建的函数引用会破坏优化，导致本可避免的子组件重渲染。因为每次渲染都会生成新函数，记忆化（Memoization）机制也就失效了。
优化难度增加 (Harder to Optimize):
当你需要构建一个高度交互、渲染数百条项目的大型列表时，最小化重渲染变得至关重要。而内联闭包的使用会阻碍这种优化。

✅ 替代方案：data-* 属性

与其为每个项目创建闭包，不如直接利用 data-* 属性将元数据附加到 DOM 元素上：

jsx 复制代码

// 单个事件处理函数
function handleClick(e) {
  const id = e.currentTarget.dataset.id; // 从 dataset 获取 id
  console.log("Clicked item:", id);
}

{items.map((item) => (
  <button key={item.id} data-id={item.id} onClick={handleClick}>
    {item.name}
  </button>
))}

优势在于：

单一函数引用 → 完美配合 React.memo 或 React.useCallback 进行记忆化优化。
显著提升大型列表或对重渲染敏感的组件的性能表现。
事件处理逻辑更集中，代码更清晰。

🤔 为何未被广泛采用？

因为闭包简单、直观 ，并且在绝大多数应用场景下性能足够好 。相比之下，data-* 属性显得有些"传统"，在现代 React/前端教程中也鲜少被提及。

但在需要关注性能或优化记忆化的场景下，data-* 属性堪称一个隐藏的利器。

✨ 总结

虽然 data-* 属性在 React 开发者的工具箱中并不常见，但它们在特定场景下能带来切实的好处：

减少不必要的函数创建
提升记忆化效果和渲染性能
实现更简洁的事件处理逻辑

它们并非要取代闭包 ，但当性能或架构设计有更高要求时，data-* 属性是一个非常值得考虑的优质替代方案。

你怎么看？ 你曾经这样使用过 data-* 属性吗？还是更习惯使用闭包？欢迎在评论区分享你的想法和经验！

希望这篇文章能给你带来启发！👇