React语法——JSX

关于JSX

JSX的全称为：JavaScript XML，作为React提供的Syntax Sugar，能够实现在JS中插入html标记语言。

JSX的作用如下：

JSX作为一个JavaScript的语法拓展，可以很好的描述UI应该呈现的交互的本质形式，并可以生成React“元素”。
Babel会把JSX转译成一个名为React.createElement()的函数调用，在以下两种等效代码中得以体现：

const element=(
  <h1 className="greeting">Hello world!</h1>
);

<!--等效--->
const element=React.createElement(
  'h1',
  {className:'greeting'},
  'Hello,world!'
);

React.createElement()会预先执行一些检查，确保已编写的代码无bug，同时创建以下对象：

const element={
  type:'h1',
  props:{
    className:'greeting',
    children:'Hello,world!'
  }
};

这些由React.createElement()创建出的对象就被称为React元素，作用为描述屏幕上我们所能看到的内容。React通过读取这些对象，使用它们来构建DOM以及保持及时更新。
同时，React并没有采用将标记与逻辑进行分离到不同文件这种人为的分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元中，来实现关注点分离。

JSX的语言特点如下：

1. 书写常规html语言
2. 无须加上$就可以向html中插入变量或者任意有效的JS表达式，在JSX语法中，可以在大括号内放置任何有效的JavaScript表达式，如：2+2，user.firstName或者formatName(user)

const element=(	
  <h>Hello,{formatName(user)}!</h>
);

3. JSX被编译后，是一个函数调用，函数返回值为JS对象。因此JSX可以作为表达式，并被赋值给变量，用于if判断语句,for循环语句等语句中，作为函数的传入参数以及返回值
4. JSX在标签中可以添加属性：
   • 属性值为字符串字面量
   • 属性值为对象/JS表达式

const element=<div tabIndex="0"></div>;
const element=<img src={user.avatarUrl}></img>;

5. 如果JSX元素标签里没有子元素，可以使用 /> 来闭合标签

<!--未包含子元素---->
const element=<img src={user.avatarUrl} />;

<!--包含子元素---->
const element=(
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

参考文献

JSX简介
JSX详解