如何探讨HTML与前端框架在组件渲染机制中的内在关联？

本文共计736个文字，预计阅读时间需要3分钟。

HTML 本身不支持组件化渲染，所有组件行为都依赖于外部样式或脚本。例如，标签中的样式需要通过CSS或JavaScript来定义。

HTML 的 <template> 标签是唯一原生“组件雏形”

它不被渲染，可存放结构片段，适合做行级模板克隆。但注意：<template> 只提供 DOM 片段容器，不带数据绑定、不自动更新、不处理生命周期。

• 必须配合 JS 手动克隆：content.cloneNode(true)，再逐个填值（row.querySelector('.name').textContent = item.name）
• 不能直接用 innerHTML 往 <template> 里塞字符串——会丢失其“不激活”特性，变成普通 HTML 解析
• 若用在表格中，<template> 必须放在 <tbody> 外（如页面顶部），否则浏览器可能因解析顺序异常而忽略

React 的 JSX 不是 HTML，而是 React.createElement() 的语法糖

写 <MyButton onClick={handleClick}>Click</MyButton> 看似像 HTML，实际编译后是调用 React.createElement('MyButton', {onClick: handleClick}, 'Click')。