概述

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>
      <input type="checkbox" checked={todo.done}>
      <span className={'done-' + todo.done}>{todo.text}</span>
    </li>
  );
});

var ul = (
  <ul className="unstyled">
    {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>
    <Home />
    {loginButton}
  </nav>
);

Switch表达式

return (
  <section>
    <h1>Color</h1>
    <h3>Name</h3>
    <p>{this.state.color || "white"}</p>
    <h3>Hex</h3>
    <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>
    <h2>Good to see you here.</h2>
  </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>
            <h1>{v}</h1>
          </div>
        ) 
    }
};

ReactDOM.render(
    <Test />,
    document.getElementById('test')
);

运行结果：

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="test"></div>
    <script type="text/javascript">
      document.getElementById("test").innerHTML="<h1><script></script></h1>";
    </script>
  </body>
</html>

运行结果：

注意，此时插入的是一个

class Test extends React.Component {
            render() {
              let v = {
            __html: "<script></script>"
          };
              return (
              <div>
                <h1 dangerouslySetInnerHTML={v}/>
              </div>
          ) 
            }
      };

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

使用React应注意

1）使用JSX时要引入React库

import React from 'react';

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

//本地
<script src="./react.js"></script>
//或者BootCDN
<script src="http://cdn.bootcss.com/react/15.4.0/react.js"></script>

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

import MyComponent from './MyComponent.js'

...

<Outer>
  <MyComponent />
</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层大括号。例如：

<div style={{color:'red', margin:'10px auto'}}></div>

React语法基础之JSX

概述