5分钟快速学会JSX
JSX: 是React引入的新的语法,从名字上我们就能看出,其实JSX的本质还是JS,它是一种 JavaScript 的语法扩展。
依照惯例,我们从一个hello world的demo来开始我们的学习
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./lib/react.development.js"></script>
<script type="text/javascript" src="./lib/react-dom.development.js"></script>
<script type="text/javascript" src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="helloWorld.js"></script>
</body>
</html>
JSX代码: (由于JSX的本质还是JS,当然还是要写在JS文件里面)
const element = <h1>Hello, world!</h1>; // 这类似于HTML标签的代码就是JSX
ReactDOM.render(
element,
document.getElementById('root')
)
用浏览器打开,我们会看到如下显示:
说明,JSX代码已经生效了~
const element = <h1>Hello, world!</h1>;// 这就是JSX
接着,我们介绍一些JSX的基本语法,参考下面代码
let fruit = '苹果';
function foo(){
// JSX本质上是普通对象
return <div>nihao</div> // 这是返回的虚拟DOM,也是对象
// return '<div>nihao</div>' // 这是返回字符串
}
let flag = false;
let attrs = {
className:'active',
abcHello:'123',
nihao: 'hello'
}
const element = (
{/*必须有根元素*/}
<div {...attrs}> {/*JSX可以添加自定义属性,并且属性名才用驼峰式;属性添加可以使用延展运算符*/}
{/*注释的标准*/}
<div>
<ul>
<li>{fruit}</li> {/*支持变量*/}
<li>{1+2}</li> {/*支持简单的表达式*/}
<li>orange</li>
<li>{foo() + '<div>hi</div>'}</li>
<li>{flag?'是':'否'}</li>{/*支持三元表达式*/}
<input type="text"/> {/*标签必须要闭合,否则会报错*/}
</ul>
</div>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
界面显示如下:
如图所示,所有的JSX代码都生效了,所以下面我们来总结一下JSX的语法规范
JSX基本语法:
1.JSX元素: 区分于DOM元素,本质上是普通对象,是组件的基本组成单元
2.JSX特性:
- 元素可以嵌套,但是必须有根元素
- 标签必须闭合,及时标签中没有内容也需要闭合,例如: img, input
3.JSX嵌入式表达式: 本质也是表达式
4.JSX属性:
- JSX可以添加自定义属性,并且属性名才用驼峰式
- 属性添加可以使用延展运算符
了解了JSX的语法规范,我们来探求一下JSX的本质
JSX的本质:
我们说JSX的本质是JS,这样说是没有问题的,但是JSX到底是怎样实现的呢?请看下面的代码:
let li1 = React.createElement('li',{key:1},'apple');
let li2 = React.createElement('li',{key:2},'orange');
let li3 = React.createElement('li',{key:3},'lemon');
// let element = React.createElement('ul',{className: 'active'},li1,li2,li3); 跟下面一样
let element = React.createElement('ul',{className: 'active'},[li1,li2,li3]);
console.dir(element)
ReactDOM.render(
element,
document.getElementById('root')
);
控制台打印element如图:
从上图我们不难发现element的本质是
React.createElement(type, props,...children)
总结:
JSX的本质就是利用createElement方法创建了element 虚拟DOM的机制
这样理解就容易多了~