上一节其实已经涉及到了一些
JSX
语法,看起来和HTML
标签几乎一样。本节将简单的介绍React
中JSX
的使用。
1. JSX简介
JSX
是JavaScript
和XML
结合的一种格式。由React
发明。它的作用是方便利用HTML
语法来创建虚拟DOM
,当遇到<
,JSX
就当做HTML
解析,遇到{
就当JavaScript
解析。另一方面在React
中可以简化代码。
下面是一段简单的JSX
语法。
<ul className = 'list'>
<li>text1</li>
<li>text2</li>
</ul>
上述代码用React
写法如下:
var child1 = React.createElement('li', null, 'text1')
var child2 = React.createElement('li', null, 'text2')
var root = React.createElement('ul', { className: 'list' }, child1, child2)
由此可见。JSX
省略了大量代码。并且更加易读。不管是大牛还是初学者都很友好。
关于JSX
的更多信息,可以查看JSX官方文档
1.1 组件和普通JSX语法的区别
自定义组件的首字母必须大写,而JSX
是小写字母开头的。
例如:
- 组件:
<App />
或者<App></App>
JSX
语法:<span>我是Jsx语法</span>
1.2 JSX中使用JavaScript语法
JSX
中也可以使用JavaScript
语法,比如下面的三元运算符
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<ul className = 'list'>
<li>{true ? '我是真' : '我是假'}</li>
<li>text2</li>
</ul>
)
}
}
export default App
2. 虚拟DOM
虚拟DOM
不是真实的DOM节点,而是虚拟化的。它可以快速反应,不占用页面的渲染机制。