提到JSX,我们肯定想知道什么是JSX,有什么特点?
JSX就是javascript和XML结合的一种格式,React发明了JSX,利用HTML语法来创建虚拟DOM, 当遇到<,JSX就当做html解析,遇到{,就当做javascript解析。
JSX的优点
- JSX执行更快,因为它在编译javascript后进行了优化。
- 类型是安全的的
- 使用JSX编写模板更加简单快速。
使用JSX
JSX看起来类似于HTML
ReactDOM.render(
<h1></h1>,
document.getElementById("root")
)
我们可以在以上代码中嵌套多个HTML,需要使用一个div包裹它
render(
<div>
<h1>好好努力</h1>
<p>爱恨情仇</p>
<h2>风华雪月</h2>
</div>,
document.getElementById("root")
);
实例中的p元素添加了自定义属性,data-time,添加自定义属性需要data-属性
render(
<div>
<h1>好好努力</h1>
<p data-time="DATA">爱恨情仇</p>
<h2>风华雪月</h2>
</div>,
document.getElementById("root")
);
独立文件
JSX文件可以放在一个独立文件上,比如idex.js
代码如下
//index.js
import "../css/reset.css";
import "../css/common.css";
import React,{ Component } from "react";
import { render } from "react-dom";
render(
<div>
<h1>好好努力</h1>
<p data-time="like">爱恨情仇</p>
<h2>风华雪月</h2>
</div>,
document.getElementById("root")
);
import React,{ Component } from "react";
import { render } from "react-dom";
上面这两行是在webpack中的写法,不懂的,可以去学习一下webpack
这里就不做介绍了。
JavaScript表达式
我们可以在JSX中使用表达式,必须放在{}中,实例如下
var arr = 1;
render(
<div>
<h1>{arr}</h1>
</div>,
document.getElementById("root")
);
结果如下:
1
var arr = [1,3,4,5];
render(
<div>
<h1>{arr}</h1>
</div>,
document.getElementById("root")
);
结果如下
1345
如果arr不用大括号{}包裹起来的话,那就只能输出arr了,而不是数组的内容
var arr = [1,3,4,5];
render(
<div>
<h1>arr</h1>
</div>,
document.getElementById("root")
);
结果如下:
arr
在JSX中不能使用if,else语句,但可以使用(三目运算)表达式来代替,
在下面代码中如果i为1的话,浏览器就会输出true
var i = 1;
render(
<div>
<h1>{ i=1 ? 'true':'false' }</h1>
</div>,
document.getElementById("root")
);
结果如下:
true
React推荐使用内联样式,我们可以使用camelCase语法来设置内联式,React会在指定元素数字后自动添加px,以下实例演示了h1元素添加myStyle内联样式
var myStyle = {
fontSize: 22,
background: '#f99'
}
render(
<div>
<h1 style={myStyle}>喜欢我就点我哦</h1>
</div>,
document.getElementById("root")
);
如果加px也可以,但是不要忘记引号哦
var myStyle = {
fontSize: '22px',
background: '#f99'
}
render(
<div>
<h1 style={myStyle}>喜欢我就点我哦</h1>
</div>,
document.getElementById("root")
);
注释
注释需要写在花括号中,如下
render(
<div>
<h1 style={myStyle}>喜欢我就点我哦</h1>
{/*我在深圳等你*/}
</div>,
document.getElementById("root")
);
{/*我在深圳等你*/}
这种写法是JSX的语法,所以一定要写在JSX内部。
在外边这样写注释,还是有所不同哦.
render(
/*喜欢我吗?*/
<div>
<h1 style={myStyle}>喜欢我就点我哦</h1>
{/*我在深圳等你*/}
</div>,
document.getElementById("root")
);
如果这样写,会出现什么情况呢?
render(
/*喜欢我吗?*/
<div>
<h1 style={myStyle}>喜欢我就点我哦</h1>
/*我在深圳等你*/
</div>,
document.getElementById("root")
);
结果会输出原文
喜欢我就点我哦
/*我在深圳等你*/
数组
JSX允许在模板中插入数组,数组会自动展开所有成员
var arr = [
"你若在我心上,情敌三千又何妨?",
"我若在你心上,负了天下有怎样?"
]
render(
<div>
<h1>{arr}</h1>
</div>,
document.getElementById("root")
);
输出结果如下
你若在我心上,情敌三千又何妨?我若在你心上,负了天下有怎样?
HTML和React组件
react可以渲染HTML标签和React组件
要渲染HTML标签,只需要在JSX中使用小写的标签名
var myDiv = <div />
render(
<myDiv />,
document.getElementById("root")
);
要渲染React组件,需要大写组件名。
import React,{ Component } from "react";
import { render } from "react-dom";
class Main extends Component{
render(){
return(
<div>
</div>
)
}
}
render(
<Main />,
document.getElementById("root")
);
react以大小写的约定来区分本地组件的类和HTML标签
注意:
由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。