在 React 中重拾原生 HTML 属性

在现代 React 组件开发中，优先想到 useState、useEffect、context、props drilling 这样的框架能力，而容易忽略：
浏览器原生 HTML 属性本身，就是一个强大而成熟的状态表达载体。
比如 data-* 为代表的自定义属性，在近几年被越来越多的专业组件库采用，如 Radix UI、Headless UI、Ark UI 等。
本文将从基础到深入，拆解为什么在 React 组件中大量使用原生属性（尤其是 data-*）是一种更专业、更可维护、更高性能的工程实践。
1. data-*：语义扩展与原生兼容性

HTML 原生属性有一个重要优势：
它们天生是“被设计来给用户代理（浏览器、辅助工具）理解的”。
而 data-* 作为 HTML5 制定的可扩展机制：

• 保证语法合法
  
• 不破坏 HTML 自身语义
  
• 与 ARIA 标准兼容
  
• 支持 CSS、JS 原生读取
  

这意味着使用 data-* 做状态表达，是天然符合浏览器和工具链的方式。
2. 提升可访问性

在构建无障碍（a11y）兼容组件时，一种错误做法是：
把组件状态（如 open/closed）全部存储在 React 内部，屏幕阅读器却读不到。
但如果将状态同步到 data-state、data-disabled，辅助工具就能更轻松感知 UI 状态。例如：

1. <button data-state="open" aria-expanded="true">Menu</button>

复制代码

屏幕阅读器可以根据 ARIA 属性直接宣布状态，而 data-state 也能作为冗余状态标识用于调试和样式。
Radix Dropdown<button data-state="open" aria-expanded="true">Menu</button> 的 Trigger

1. <DropdownMenuPrimitive.Trigger
2.   data-state={open ? "open" : "closed"}
3.   aria-expanded={open}
4. >
5. <Content
6.   data-state={open ? 'open' : 'closed'}
7.   data-side={side}
8.   data-align={align}
9. >
10.   {children}
11. </Content>
12. </DropdownMenuPrimitive.Trigger>

复制代码

Radix 始终同步 data-state 与 aria-expanded——
这样即便 React 状态层出故障，ARIA 与 DevTools 都能明确显示组件状态。
3. 简化样式化：CSS 直接响应状态，避免 JS 再渲染

传统方式：

• React 改状态 → 组件重新渲染 → className 改变 → 样式变化
  

而 data-* 提供了更直接、无阻塞的方式：

1. [data-state="open"] {
2.   opacity: 1;
3.   transform: scale(1);
4. }
6. [data-state="closed"] {
7.   opacity: 0;
8.   transform: scale(0.95);
9. }

复制代码

完全不需要额外 JS 逻辑。
Tailwind 示例：

1. [/code][size=4]Radix 的 Tabs Root[/size]
3. Radix 的 Tabs Root 会给触发项注入：
4. [code]

复制代码

CSS 直接响应：

1. [data-state="active"] {
2.   color: var(--accent);
3. }

复制代码

优点总结

• 更少的 JS 参与 意味着更快
  
• 避免 React re-render 意味着更稳定
  
• 样式只靠 CSS cascade 意味着更干净
  

4. 框架无关性

React 的 className、state、useMemo、useCallback 仅存在于虚拟 DOM 中。
而 data-* 写在真正的 DOM 节点上：

• 测试工具（Playwright、Cypress）可直接选择
  
• 浏览器可直接识别
  
• SSR 与 SEO 可直接读取
  
• 迁移框架时不受代码结构影响（例如迁移到 Vue/Solid/Svelte）
  

Radix UI 做得最极致的一点：

它所有组件都输出没有样式的 “primitive DOM 节点”，
而状态全部映射为 data-*：

1. [/code]使之成为一套真正的 [b]headless 组件协议[/b]，而不是 React 专属 DSL。
2. [size=5]5. 性能优化：减少不必要的 React re-render[/size]
4. 如果用 className 或 props 作为状态传递，当状态变化时，React 必须：
5. [list=1]
6. [*]重新执行组件函数
7. [*]diff 虚拟 DOM
8. [*]再决定是否更新 DOM
9. [/list]但若使用 data-*：
10. React 只需更新一次根节点的属性。
11. 子组件无需 re-render。
12. [size=4]Radix Accordion[/size]
14. Accordion 内容展开时只更新触发器的 data-state：
15. [code]

复制代码

内容本身不会重新渲染，不会额外执行 useEffect、useLayoutEffect。
这种模式特别适合：

• 大型表格组件
  
• 虚拟滚动
  
• 菜单、Popover、Tooltip 等频繁开合的复杂交互
  

6. 调试友好

React 状态调试有几个问题：

• useState 值在 DevTools 中需要额外打开 React 面板
  
• className 合成后难以识别状态来源
  
• 在复杂组件中状态链路不清晰
  

但 data-* 让调试变得“肉眼直观”：

1. <button data-state="open" data-disabled="true">...</button>

复制代码

你不用打开任何插件，就能立刻看到每个节点的状态。
Radix 团队在 RFC 中提到：

data-state 与 data-disabled 的主要目的之一，就是增强可调试性。

7. 案例剖析：Radix 的 data-* 状态模型

下面根据源码梳理一张类图，逻辑示意，展示 Radix 组件的状态是如何“外溢”到 DOM 属性的：
graph LR    A[React State Hook
useControllableState] -->|derives state| C[Radix Component Logic
e.g. use<button data-state="open" aria-expanded="true">Menu</button>Context]    C -->|expose state| D[DOM Node
data-state attributes]Radix 的数据流是一种精心设计的“漏斗”：

• React 层管理逻辑
  
• 计算状态
  
• 把状态下沉到 DOM 原生属性
  
• CSS / ARIA / 工具链再根据这些属性响应
  

这是一种非常解耦的模型。
8. Radix Dropdown<button data-state="open" aria-expanded="true">Menu</button>

以 @radix-ui/react-dropdown-menu 为例。
Trigger

1. const Trigger = React.forwardRef((props, ref) => {  const open = useDropdown<button data-state="open" aria-expanded="true">Menu</button>Context();  return (      );});

复制代码

触发器只负责把状态表达为：

• data-state
  
• aria-expanded
  

完全不关心样式、动画、布局。
菜单内容（Content）

1. <DropdownMenuPrimitive.Trigger
2.   data-state={open ? "open" : "closed"}
3.   aria-expanded={open}
4. >
5. <Content
6.   data-state={open ? 'open' : 'closed'}
7.   data-side={side}
8.   data-align={align}
9. >
10.   {children}
11. </Content>
12. </DropdownMenuPrimitive.Trigger>

复制代码

这些 data-* 使得 CSS 可以精确选择：

1. [data-state="open"][data-side="bottom"] {
2.   animation: slideDown 200ms;
3. }

复制代码

从而达到 交互逻辑与展示逻辑彻底分离。
9. 总结

工作为求效率使用框架合情合理，但个人学习不能只看框架，有时候学学 HTML 也不错，哈哈，甚至可以帮助我们更好地使用框架。最后总结下各项优势：
维度优势可访问性与 ARIA 标准兼容，屏幕阅读器更容易识别状态样式化CSS 可直接响应状态，不需要 JS 驱动 class 切换性能减少不必要 re-render，复杂组件收益巨大框架无关性状态直接存在 DOM，可跨框架复用调试DevTools 可见属性，定位问题更直接工程化支持 Tailwind、设计系统、主题系统等工具
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

很好很强大  我过来先占个楼 待编辑

这个好，看起来很实用