了解什么是JSX以及它的语法

一、什么是JSX？

• JSX 即 JavaScript XML，是一种在 React 组件内部构建标签的类 XML 语法。
• JSX 并不是一门新的语言，仅仅是个语法糖（syntactic sugar），允许开发者在 JavaScript 中书写 HTML 语法。最后，每个 HTML 标签都转化为 JavaScript 代码来运行。
• 这样对于使用 JavaScript 来构建组件以及组件之间关系的应用，在代码层面显得更加清晰。而不再像过于一样用 JavsScript 操作 DOM 来创建组件以及组件之间的嵌套关系。

ps: React 不强制我们一定要用 JSX，只用 JavaScript 也可以。但使用 JSX 可以让我们开发更加高效，代码更加简洁。（使用JSX语法后，要引入babel的解析器，把JSX转化为JS语法，这个工作由babel自动完成。）

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。（React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 ）

二、JSX的载入方式：

JSX目前有两种方法载入

1、内联方法载入

<script type="text/babel">
    ReactDOM.render(
      <h1>hello hangge.com</h1>,
      document.getElementById('example')
    );
</script>

2、外联方式载入

将JSX代码单独放在一个.jsx文件中，然后通过script标签引入

ReactDOM.render(
     <h1>hello hangge.com</h1>,
     document.getElementById('example')
);

引入rct.jsx文件

<script type="text/babel" src="hello.jsx"></script>

三、JSX的语法详解

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

1、在JSX中使用JavaScript表达式
在JSX中插入JavaScript表达式十分简单，直接在JSX中将JS表达式用大括号括起来即可。例如：

在JavaScript中，表达式就是一个短语，Javascript解释器会将其计算出一个结果，常量就是最简单的一类表达式。常用的表达式有：

• 变量名；
• 函数；
• 属性访问表达式；
• 函数调用；
• 算数表达式；
• 关系表达式；
• 逻辑表达式；
• 三目运算符

render(){
 let num = -2;
return (
  {
     num>0?num++:num--
   }
)
}

需要注意的是，if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在{}中，但可以先将其赋值给一个变量,if-else也可以用三目运算符代替（上面的就是一个三目运算符的例子）

render(){
  let num = -2;
  num>0?num++:num--
   return {num}
}

2、JSX也可以像HTML标签一样包含Children

const element = (
  <div>
    <h1>Donna</h1>
    <h2>leo</h2>
  </div>
);

也可以是

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

3、JSX可自动防范注入攻击

在JSX中嵌入接收到的内容是安全的，因为在默认情况下，React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。

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

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

5、自定义属性

除了标签特有的属性外，我们也可以自定义一些属性。但这些自定义属性在真正的页面渲染后，是否会显示在页面上由如下规则决定：
凡是以 data- 开头的自定义属性，在页面渲染后均可以显示在页面上。
非 data- 开头的自定义属性，页面渲染后则不显示。
比如我们使用 JSX 书写如下代码：

var name= <h1 height="50" data-name="donna" name="leo">donna</h1>

最后渲染在页面上的结果，只有以 data- 开头的自定义属性被渲染到页面上，其他自定义属性则被忽略掉。

另外需要特别注意:直接使用class在React.js的元素上添加类名如<div class="aaa"></div>这种方式是不合法的，还有一个特例for属性，例如<lable for="male">Male</lable>因为for也是JavaScript的关键字，所以在JSX用htmlFor替代，即

<lable htmlFor="male">Male</lable>

6、JSX中的Children

React组件中有一个特殊的prop ：props.children。它指代了JSX表达式中开闭标签中包含的内容

下面我们会讨论几种指定JSX的children的方法：

1）、使用字符串字面量

可以直接在JSX的开闭标签中写入字符串字面量，组件的props.children就是该字符串值

<MyComponent>Donna</MyComponent>

MyComponent的props.chilren将获得”Donna”字符串。通过该方式传入的字符串是未经HTML转义的。实际上你只需要像在HTML标签中写入文本那样就可以了

PS:JXS会自动删除一行中开头和结尾处的空白符；JSX会自动删除空行；JSX会删除紧邻标签的换行；JSX会删除字符串中的换行；字符串中的换行会被转换成一个空格。

2、JSX元素作为children
我们同样可以使用JSX元素作为JSX的children，由此生成嵌套组件：

<MyComponent>
  <One/>
  <Two/>
</MyComponent>

3、混合使用字符串字面量和JSX作为children

<MyComponent>
  donna
  <ul>
    <li>leo<li/>
    <li>momo<li/>
  </ul>
</MyComponent>

MyComponent的props.children将得到一个数组，数组的第一个元素就是字符串“Here is a list:”，第二个元素是一个对象（JSX代表JavaScript对象）。

4、可以将任何有效的JavaScript表达式作为children

将任何有效的JavaScript表达式作为children，将其放在{}中即可

<MyComponent>{'donna'}</MyComponent>

5、有关布尔值、Null以及Undefined作为children

布尔值，Null以及Undefined可以作为有效的children，但他们不会被render，下面的JSX表达式都会render一个空的div标签：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{true}</div>

7、React中组件的render方法

• 一个组件类必须要实现一个render方法
• 这个render方法必须要返回JSX元素
• 必须要用一个外层的JSX元素把所有内容包裹起来，返回并列多个JSX元素是不合法的

最后看一个我觉得有必要知道的小知识点吧

条件返回

render () {
  const onOff= true
  return (
    <div>
      <h1>
        条件返回
        {onOff
          ? <strong> donna</strong>
          : <span>leo</span>
        }
      </h1>
    </div>
  )
}

上面的代码中定义了一个 onOff变量为 true，下面有个用 {} 包含的表达式，根据 onOff的不同返回不同的 JSX 内容。

如果返回 null ，那么 React.js 会什么都不显示，相当于忽略了该表达式插入。