React发明了JSX,利用HTML语法来创建虚拟DOM。React的核心机制之一就是可以在内存中创建虚拟的DOM元素。以此来减少对实际DOM的操作从而提升性能。 JSX 即Javascript XML,它是对JavaScript 语法扩展。React 使用 JSX 来替代常规的 JavaScript。你也可以认为JSX其实就是JavaScript。当遇到
JSX的优点:
快,执行速度更快,因为它在编译为JavaScript代码后进行了优化。
可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速。
使用JSX
如果要使用JSX,需要得到语法的支持,你可以使用Babel来进行转换。在该篇文章当中直接引入Babel文件。
将上一篇文章的“你好,世界”拿过来看一下:
TitleReactDOM.render(
你好,世界
,document.querySelector("#wrap")
)
以上代码中的模板即是用了JSX。如果我们要在模板中嵌套多个HTML标签,需要使用一个父元素对其进行包裹。将代码修改为:
ReactDOM.render(
张培跃
欢迎学习 React
今天天气不错,挺风和日丽的!
document.querySelector("#wrap")
)
注意千万不要在最外层添加多个并列标签,否则会报错!另外如果你为JSX代码用引号包裹起来的话,浏览器会认为是文本而不是HTML!
ReactDOM.render(
"
document.querySelector("#wrap")
)
单独放到文件内
咱们也可以将JSX代码单独放到一个文件上,供其它文件来调用 。首先创建一个名字为my_react.js的文件,代码如下:
ReactDOM.render(
我好帅!我好苦恼啊!
,document.getElementById('wrap')
);
然后在你的HTML文件当中引入该JS文件即可:
Title当然你也可以将你的JSX放到外部文件中。创建一个名字为react-jsx.js的文件,内容如下:
var myInfo=
我好帅!我好苦恼啊!
;然后引入:
TitleReactDOM.render(
myInfo,
document.querySelector("#wrap")
)
JSX当中的标签类型
在JSX语法中,使用的标签类型有两种:DOM类型的标签(div、span等)和React组件类型的标签(关注后面文章)。DOM类型的标签需要标签的首字母小写,React组件类型的标签需要首字母大写。React也是通过首字母的大小写来判断渲染的是哪种类型的标签。
React组件类型标签:
function ZhangPeiYue(){
return (
)
}
ReactDOM.render(
//React组件类型标签
,
document.querySelector("#myApp")
)
React组件类型标签:
ReactDOM.render(
//DOM类型标签
document.querySelector("#myApp")
)
JSX中的表达式
JSX是支持表达式的,用法很简单,你需要将表达式写到{}内即可。代码如下:
ReactDOM.render(
{100+100}
document.querySelector("#wrap")
)
不过需要注意的是在JSX当中,是不能使用if else 的,不过可以使用三元运算表达式:
var ok=1;
ReactDOM.render(
{ok==1?"我很帅":"我很有才华"}
document.querySelector("#wrap")
)
JSX上的style
如果要用JSX来添加样式,很简单,代码如下,此处不解释:
var ok=1;
var myStyle={
color:"red",
fontSize:50
}
ReactDOM.render(
{ok==1?"我很帅":"我很有才华"}
document.querySelector("#wrap")
)
或者:
var ok=1;
ReactDOM.render(
color:"red",
fontSize:50
}}>{ok==1?"我很帅":"我很有才华"}
document.querySelector("#wrap")
)
JSX上的数组输出
JSX可以直接在模板输出JavaScript变量。如果这个变量是一个数组,会自动展开所有元素。是不是很给力?哈
var arr=[
你是风儿
,我是沙
,缠缠绵绵到天涯
];
ReactDOM.render(
{arr}
document.querySelector("#wrap")
)
咱们也可以利用数组的map属性来对其进行数据列表渲染:
var arr=["你是风儿","我是沙","缠缠绵绵到天涯"];
var lis=arr.map(function(v){
return
{v}
})
ReactDOM.render(
{lis}
document.querySelector("#wrap")
)
JSX当中的注释
只需要将注释写到{}当中即可,如下:
var arr=[
你是风儿
,我是沙
,缠缠绵绵到天涯
];
ReactDOM.render(
{
/*前
* 行
* 注
* 释*/
// 单行注释
// arr
}
document.querySelector("#wrap")
)
JSX其实就是JavaScript。一些关键字不要作为XML的属性名。例如:for,if,class 。另外大括号里是JavaScript,不要加引号,加引号就会被当成字符串。