分针网——每日分享：React语法基础之JSX

最新推荐文章于 2022-04-02 18:13:33 发布

choucongtan4384

最新推荐文章于 2022-04-02 18:13:33 发布

阅读量51

点赞数

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/u/3474967/blog/1186427

版权

更多文章：www.f-z.cn

概述

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。react利用虚拟DOM来减少对实际DOM的操作从而提升性能。

JSX是什么

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。使用虚拟DOM可以将React的语法转换为标准的js语言。

简单来说，JSX就是javascript和XML结合的一种格式。

JSX语法实例：

const element = <h1>Hello, world!</h1>;

实际上面的代码转换为js代码，等价于：

var element = React.createElement(

"h1",

null,

"Hello, world!"

);

JSX简介

JSX的特点

jsx语法之所以被大家接受，主要具有以下特点：

类XML语法容易接受，结构清晰

增强JS语义

抽象程度高，屏蔽DOM操作，跨平台

代码模块化

Transfer

JSX编译器的核心是将基于XML的语言编译成JS代码，主要是依赖于React.createElment函数。如：

var Nav;

// Input (JSX):

var app = <Nav color="blue" />;

// Output (JS):

var app = React.createElement(Nav, {color:"blue"});

var Nav, Profile;

// Input (JSX):

var app = <Nav color="blue"><Profile>click</Profile></Nav>;

// Output (JS):

var app = React.createElement(

Nav,

{color:"blue"},

React.createElement(Profile, null, "click")

);

JSX语法

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。例如：

var arr = [

<h1>Hello world!</h1>,

<h2>React is awesome</h2>,

];

ReactDOM.render(

<div>{arr}</div>,

document.getElementById('example')

);

那么接下来我们针对React简单介绍下常见的语法。

三元表达式

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。例如:

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

上述代码经编译后意思等同于：

var person = React.createElement(

Person,

{name: window.isLoggedIn ? window.name : ''}

);

数组递归

数组循环,数组的每个元素都返回一个React组件。例如：

var lis = this.todoList.todos.map(function (todo) {

return (

<li>

</li>

);

});

var ul = (

{lis}

</ul>

);

JSX事件绑定

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。例如，给一个按钮绑定点击事件：

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

事实上，React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。

If-Else条件语句

上面我们说了三元表达式，但是在有些场景下，三元表达式往往并不能满足需求，React建议的方式是在JS代码中使用if表达式。例如：

var loginButton;

if (loggedIn) {

loginButton = <LogoutButton />;

} else {

loginButton = <LoginButton />;

}

return (

<nav>

{loginButton}

</nav>

);

Switch表达式

return (

<h1>Color</h1>

<p>{this.state.color || "white"}</p>

<p>

{(() => {

switch (this.state.color) {

case "red": return "#FF0000";

case "green": return "#00FF00";

case "blue": return "#0000FF";

default: return "#FFFFFF";

}

})()}

</p>

</section>

);

Loop循环

var rows = [];

for (var i=0; i < numrows; i++) {

rows.push(<ObjectRow />);

}

return <tbody>{rows}</tbody>;

JSX语法属性

jsx中可以使用引号将字符串字面量指定为属性值。如：

const element = <div tabIndex="0"></div>;//”0”是一个字符串字面量

你也可以将一个JavaScript表达式嵌在一个大括号中作为属性值：

const element = <img src={user.avatarUrl}></img>;

上面的代码等价于js的如下代码：

const element = React.createElement("img", { src: user.avatarUrl });

JSX的子元素

JSX允许使用一个不包含Children的empty tag。如下代码是正确的：

const element = <img src={user.avatarUrl} />;

当然，也可以像HTML标签一样包含Children。例如：

const element = (

<div>

<h1>Hello!</h1>

</div>

);

这种写法在生成React元素的时候给我们带来了很大的便利，而且能够更加直观地描述UI。因而，简单易读。

JSX可自动防范注入攻击

在JSX中嵌入接收到的内容是安全的。不会出现代码注入的情况。

onst danger = response.potentialDanger;

cosnt ele = <h1>{title}</h1>

在默认情况下，React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。

我们将代码编译后增加html：

class Test extends React.Component {

render() {

let v = "<script><\/script>";

return (

<div>

</div>

)

}

};

ReactDOM.render(

<Test />,

document.getElementById('test')

);

运行结果：

SouthEast

可以看到通过JSX插入的文本自动进行了HTML转义，所以这里插入的是一段文本，而不是

<!DOCTYPE html>

<html>

<head>

</head>

<body>

document.getElementById("test").innerHTML="<h1><script><\/script><\/h1>";

</script>

</body>

</html>

运行结果：

SouthEast

注意，此时插入的是一个

class Test extends React.Component {

render() {

let v = {

__html: "<script><\/script>"

};

return (

<div>

</div>

)

}

};

注：此时，插入了script标签。

SouthEast

使用React应注意

1）使用JSX时要引入React库

import React from 'react';

或者你不使用打包工具，也可以直接通过script标签引入React。例如：

//本地

//或者BootCDN

2）引入JSX中用到的自定义组件

JSX中用到的组件可能并不会在JavaScript中直接引用到，但自定义组件本质上就是一个JS对象，你在JSX中使用的时候，需要首先将该组件引入到当前作用域。例如：

import MyComponent from './MyComponent.js'

...

<Outer>

</Outer>

3）自定义组件首字母一定要大写

JSX中小写字母开头的element代表HTML固有组件如div，span，p，ul等。用户自定义组件首字母一定要大写如

4）元素标签名不能使用表达式

如果需要使用一个表达式来决定元素标签，你应该先将该表达式的值赋给一个大写字母开头的变量。例如：

const components = {

photo: PhotoStory,

video: VideoStory

};

function Story(props) {

// Correct! JSX type can be a capitalized variable.

const SpecificStory = components[props.storyType];

return <SpecificStory story={props.story} />;

}

5）设置style属性

在设置标签style属性的时候，要注意，我们是将一个描述style的对象以JavaScipt表达式的形式传入。因此应该有2层大括号。例如：

转载于:https://my.oschina.net/u/3474967/blog/1186427

choucongtan4384

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分针网——每日分享：React语法基础之JSX

更多文章：www.f-z.cn 概述 React的核心机制之一就是可以在内存中创建虚拟的DOM元素。react利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX是什么 JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。React...
复制链接

扫一扫