浅谈react之jsx

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」

最近在看react，相关知识复习一下。在react中使用 JSX 来替代常规的 JavaScript，JSX 是一个看起来很像 XML 的 JavaScript 语法扩展

定义：

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面

代码样式:

html：

<div id="test"></div>

css：

.title{
   width:300px;
}

JavaScript:

const id = 'id'
const data = 'hello，react'

const VDOM = (
    <div>
	<h2 className="title" id={id}>
            <span style={{color:'pink',fontSize:'20px'}}>{data}</span>
	</h2>
    </div>
)

//渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

补充：

ReactDOM.render(VDOM,document.getElementById('test'))

参数解释:

(1)第一个参数: 为js创建的虚拟dom对象或者jsx创建的虚拟dom对象

(2)第二个参数: 是用来包含虚拟DOM元素的真实dom元素对象,dom对象表示渲染到哪个元素内

元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

语法规则:

1. 如果在标签中混入JS表达式时要记得使用尖括号{}

2. 在定义虚拟DOM时，注意不要用引号''

3. 只有一个根标签

4. 内联样式，要用style={{key:value}}的形式去写

5. 样式的类名指定不要用class，要用className

6. 标签必须闭合

7. 标签首字母:

   (1)若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错

   (2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

优点:

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