在 React 开发中，开发者们在组件渲染方法（特别是在列表渲染 map 函数中）使用闭包（Closures）时，几乎不会多想。
但你知道吗？有一个未被充分利用却功能强大的替代方案，它能提升性能、增强代码可读性，甚至能更好地与工具集成？
让我们来聊聊 HTML 的 data-* 属性：这个前端开发者很少使用，却值得重新审视的特性。
❓ 什么是 data-* 属性？
HTML 的 data-* 属性允许你在 DOM 元素中嵌入自定义数据。在原生 HTML 中：
<div data-user-id="123" data-role="admin">John</div>
在 React 中，用法如出一辙：
<div data-user-id={user.id} data-role={user.role}>
{user.name}
</div>
在事件处理函数中，可以通过 dataset 对象访问它们：
e.currentTarget.dataset.userId; // 注意：属性名会转换为驼峰式 (userId)
🧠 常见模式：.map() 中的闭包
假设你正在渲染一个项目列表：
{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 元素上：
// 单个事件处理函数
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-* 属性吗？还是更习惯使用闭包？欢迎在评论区分享你的想法和经验！
希望这篇文章能给你带来启发！👇
