- JSX简介
- JSX表达式
- JSX属性
- JSX与事件
- JSX与样式
- JSX与Object
- JSX与XSS
- 不用JSX
1、jsx简介
++ JSX 的全称是 JavaScript XML,它是一种 JavaScrip 的语法扩展,也就是一种语法,在 React 中我们不一定要使用 JSX,但使用 JSX 有以下优点:
1. JSX 执行更快,因为它在编译为 JS 代码后进行了优化
2. 它是类型安全的,在编译过程中就能发现错误
3. 使用 JSX 编写模板更简单
++ JSX是在JavaScript内部实现的,解析器对JSX进行解析:遇到<,JSX就作为HTML解析,遇到{,JSX就作为JavaScript解析。如下:
const element = <h1>hello , world </h1>
2、JSX表达式
下面再来看一个例子:
//先创建一个类
class People{
//构造方法
constructor(name,gender){
this.name = name;
this.gender = gender;
}
//成员方法
fn(){
return this.name +" is "+this.gender;
}
}
//实例化一个对象
var pe = new People('fake','man');
//JSX语法
const ele = <h1>{pe.fn()}</h1>
const ele1 = <h2>{pe.name} is {pe.gender}</h2>
const eles= <div>{ele}{ele1}</div>
//把整个JSX写的DOM渲染到index上去
ReactDOM.render(eles,document.getElementById('root'));
此时,index.html内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
++ 在执行ReactDOM.render(eles,document.getElementById('root'));
的时候就会主动去找eles变量,然后找到;
3、JSX属性
先看例子:
const user = {
url:'url',
name:'name'
}
const element = <div className="container"></div>;
const element1 = <img src={user.url} />;
++ 在 JSX 中可以为标签添加属性,但有些地方需要注意,比如在 HTML 标签中,元素的类关键字为 class ,而在 JSX 中,className 替代了class;如果你是用单标签,则需要以 /> 结尾,如 标签。
4、JSX与事件绑定
++ JSX 绑定事件与原生 HTML 差别并不是很大,唯一的却别就是 JSX 采用驼峰(camelCase)命名法来描述事件的名称
<button onClick={this.checkSubmit.bind(this)}>Submit</button>
- 在这里插一句,React 模拟事件系统。React 不会把事件绑定到每一个具体元素上,而是采用事件代理模式:在根节点上为每种事件添加唯一的 Listener,然后通过触发事件的 target 找到真正的触发元素。
5、JSX与样式
++ 在原生 HTML 中,我们使用的是字符串来为 style 添加内容,在 JSX 中,我们需要使用对象
<div style={{color:'#AAAAAA',width:'100px',fontSize:'15px'}}>Hello</div>
//or
var style = {
color:'#AAAAAA',
width:'100px',
fontSize:'15px'
}
var element = <div style={style}>Hello</div>;
- 使用了 js 对象的方式来完成在使用 JSX 时为元素添加 style。除了字符串变为对象,在属性名的使用上也产生了变化,JSX 使用驼峰命名,例如:font-size 变为 fontSize,background-color变为backgroundColor等,它们和标准的 JavaScript 操作 DOM 样式的 API 是一致的。
6、JSX与Objects
先看下代码
const element = <div className="container">Hello world!</div>;
++ 很简单的 JSX 代码对吗?让我们提取其中使用 JSX 语法的部分
。这段代码在经过 babel 编译后会变成如下代码的形式:
React.createElement(
"div",
{className: "container"},
"Hello world!"
);
单标签会被编译成什么样子:
<img src="url" />
React.createElement(
"img",
{src: "url"},
null
);
- Babel 是一个 JavaScript 编译器,单页面内引入 js 代码时,使用的标签是: ,这里的 type 是 babel。Babel 可以将 ES6 转码为 ES5,这意味着使用 Babel,我们将可以在版本很低的浏览器上使用 ES6 语法。
7、JSX与XSS
++ 以往在搭建网页的时候通常要对用户输入的值进行一定的过滤操作,以防止XSS攻击,在React中,我们完全不必担心这个问题,JSX语法已经隔离了这个问题;
const name = response.user.name;
//我们可以直接使用得到的值
const element = <h1>{name}</h1>
- 之所以可以直接使用得到的值是因为ReactDOM在渲染之前会默认的过滤所有的传入的值,{}中的内容被渲染成为字符串,,因此能够有效的防止XSS。
8、不适用JSX
++ 在这给出一个使用JSX的案例
class Test extends React.Component{
render(){
return <div> Hello {this.props.name}</div>
}
}
ReactDOM.render(
<Test name={'shiyanlou'}></Test>,
document.getElementById('root')
);