446.【前端】JSX 和 HTML 的区别
2022-10-03 本文已影响0人
七镜
首先看一个例子：
HTML版本：
<button onclick="alert('七镜')">七镜</button>
JSX版本：
<button onClick={() => {alert('七镜')}}>七镜</button>
上面这个例子有两个地方不一样：
- HTML版本的属性名全是小写的，而在 JSX 里的属性是驼峰式命名（camel case）；
- 两者的onclick属性值不一样。
之所以有上面的两点区别，是因为 JSX 标签本质上就是 JavaScript 代码。如果把按钮的 JSX 输出成 JavaScript，就真相大白了：
let jsx = <button onClick={()=>alert('七镜')}>七镜</button>
console.log("jsx is: ", jsx)
console.log("jsx is: ", JSON.stringify(jsx))
输出结果
JSX 和 HTML的常见区别：
| 项目 | JSX | HTML |
|---|---|---|
| 闭合要求 | 所有标签都必须闭合，比如 <br />、<div></div>
|
有一些标签可以不闭合，比如 <br>
|
| 属性命名标准 | 驼峰式命名，如：<button onClick={()=>{alert('七镜')}}>
|
全小写，如: <button onclick="alert('七镜')">
|
| 自定义标签 | 支持。自定义组件名可直接用作标签名，如 <MyComponent />
|
无（除非使用 web component） |
| 模板支持 | 在标签特定的位置可使用 大括号{} 插入动态内容 |
无 |
| 引用 CSS 类 | 使用 className 属性，如：<div className="container"> |
使用 class 属性 |
| 内嵌样式 | 使用 style 属性，如：<div style={{ background: "red" }}>
|
使用 class 属性，如：<div style="background: red;">
|
| textarea | <textarea value="文本框内容" /> | <textarea>文本框内容</textarea> |
| label | <label htmlFor="input-id"> | <label for="input-id"> |
| select | 使用 select 标签的 value 属性标识当前选项，如：<select value="七镜">...</select>
|
使用 option 标签的 selected 属性标识当前选项，如：<option selected>七镜</option>
|
