React 中重要的 JSX

最新推荐文章于 2024-11-11 19:33:40 发布

原创最新推荐文章于 2024-11-11 19:33:40 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #reactjs

react 专栏收录该内容

12 篇文章

订阅专栏

本文深入讲解了JSX在React框架中的应用，对比了JSX与传统JavaScript创建元素的方法，突出了JSX的性能优势和类型安全性，介绍了JSX在模板编写上的便捷性和规范性。

了解 JSX

React 使用 JSX 来替代常规的 JavaScript。
JSX (JavaScript XML) 是一种 JavaScript 的语法扩展，运用于 React 架构中，其格式比较像是模版语言，但事实上完全是在 JavaScript 内部实现的。元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面。
通俗的讲，JSX 将 < 开头的解析成 html，将 { 开头的解析成 javascript

为什么用 JSX 更好呢？

举个例子：
创建一个如下的简单列表：
在这里插入图片描述
用 js 需要这样：

var child1 = React.createElement('li',null,'hello')
var child2 = React.createElement('li',null,'world')
var root = React.createElement('ul',{className:'list'},child1,child2)

而使用 JSX：

<ul className="list">
	<li>hello</li>
	<li>world</li>
</ul>

JSX 优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

React 小常识

自定义组件名，第一个字母大写；
可以给 html 添加类但 class 需改写成 className，另外若添加自定义的要渲染的属性，最好以 data- 开头；
若 JSX 元素没有子元素/节点，可以使用 /> 来闭合标签（单闭合）；
可以通过 {props} 往 html 中插入变量或任意有效的 JS 表达式，而无须加上 $；
由于 JSX 更贴近 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性（驼峰法）。