五分钟学习React(四)：什么是JSX

JSX，即javscript XML，是js内定义的一套XML语法。目前是使用babel做为JSX的编译器。这也是在前几期中载入babel的缘由。

Facebook引入JSX是为了解决前端代码工程复杂、维护困难等问题。JSX为咱们提供了一种虚拟DOM的实现方式。 经过使用类XML语法的JSX，定义虚拟的DOM，以减小真实DOM的操做，从而提升运行效率。因为JSX的使用，在React项目中建立Components变得至关简单，用户能够将程序逻辑（programming logic）和标记语言（markup）混合在一块儿使用，促进代码的可读性、可预测性，有效的提升代码的维护效率。

接下来咱们讲讲JSX的基本语法：

1. JSX基本定义

const element = <h1>Hello World!</h1>;
ReactDom.render(
    element,
    document.getElementById('root');
)

从上述代码，咱们能够理解JSX的XML语法至关因而一个js的表达式，它能够直接给变量赋值。（其实不是这样，真正的理解【看这里】)

2. JSX内定义表达式

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

在JSX的内部，咱们能够执行方法（function），能够输入对象。能够直接输出字符串变量等.这里的{}相似于php中<?php ?>的语法。

3. JSX内定义属性（Attribute）

const element = <div class="div-test"></div>
const element = <div className="div-test"></div>

JSX的属性定义遵循CamelCase原则。若是定义的是html标签默认的属性，则可使用html的规则。上面这例子中，两行代码都是用来定义class的属性。

// 这两行的代码效果相同
const element = <div tabIndex="0"></div>;
const element = <div tabindex="0"></div>;

这则例子，定义一个名为tabindex的属性名字，在JSX中遵循使用camelCase格式。固然若是不使用也能够，React依旧能够执行。

const element = <a href={person.link}> </a>

一样的,在属性中也能够添加变量表达式，用{}来执行。

4. JSX内嵌子标签

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

在这种状况下，必须使用（）来表示。同时JSX中，只能有一个根节点。不能两个节点并列存在，以下：

const element = (
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
);

这种状况，React是没法编译成功。

5.总结

1. JSX是一个js内的XML语法，将程序逻辑和标记语言在同一个文件中显示。用利于代码开发和维护
2. JSX中，咱们引入了虚拟DOM的概念【看这里】
3. JSX的基本语法至关灵活，能够表达式内嵌、定义属性等