JSX小叙

一、JSX语法干了啥？

   首先同个一个例子引入JSX语法。对于一段html代码如：

<div class="red">
      <button class="btn btn-info"></button>
</div>

在javascript中怎么描述上述的代码呢？

{
  type:'div',
  props:{
            className:'red',
            children:{
                          type:'button'，
                          props:{
                                      className:['btn','btn-info']
                                    }
                          }
            }
}

描述一段html代码，在javascript中需要使用这么繁杂的结构。这种代码不利于优化，而且不利于维护。我们希望在javascript中也能够书html代码。因此，JSX语法由此而生。
JSX中代码的实现：

const MessageBtn = () =>(
            <div className="red">
                  <button className="btn btn-info"></button>
            </div>
        )

上述代码是不是更加容易维护，实际上JSX在编译完成后，同样将html代码解析成了javascript版本的代码。只不过这份工作有能够解析 JSX的解析器帮助我们完成了。上述代码解析之后的源码为：

var MessageBtn=function(){
      return React.createElement(
          'div',
          {className:'red'},
          React.createElement(
          'button',
           {className:'btn btn-info'},
            null
          )
      )
 }

由以上代码可以看出，你同样能够用React.createElement来创建元素，而不用JSX语法。

二、JSX语法简介

   1、JSX采用的类似XML语法的ECMAScript拓展，因此，标签可以任意嵌套，注意：定义标签时，只允许被一个标签包裹，标签一定要闭合，在使用JSX编写时候，这两种错误都会及时提示出来。对于第一种错误的原理请想一想转换之后的源码揣摩下。
   2、元素类型：JSX规定，以大写字母开头的单词会被解析成组件，小写的解析为dom元素
注释： 在html中的注释注释，由于JSX实际上也是javascript，因此，JSX中使用{/* */}来进行注释，请千万注意一定要用{}扩起来，对于判断IE版本的条件注释，请使用javascript脚本判断来替代。
   2、元素属性：由于html中的class和for都是javascript中的关键字，因此JSX进行了转换，使用className替代class，受用htmlFor替代for
   3、布尔属性：JSX中默认的布尔类型的值都是true，例如<checkbox checked> 表示该 选框被选中，如果不想选中，可以这样<checkbox checked={false}>或者不写checked属性
   4、自定义html属性：JSX不支持自定义属性，React也不会渲染自定义属性，例如<div d="ssss"></div>渲染的结果为<div></div>
当你需要使用自定义属性的时候，应该使用html中的自定义属性规范，即使用data-前缀。
   5、JSX中使用javascript表达式：JSX中使用javascript表达式用{}替代“”即可，例如：

const person =<Person name={isLisi ? 'lisi' : 'zhangsan'} />;

   6、html转义：为了防止XSS攻击，React会将字符实体进行转义。您可以使用以下几种方式进行解决。
       a、直接使用utf-8的字符
       b、使用对应Unicode编码
       c、用数组包装下<div>{['cc','<span>&copy</span>','2015xxx']}</div>
       d、直接使用原生的HTML
       e、React提供了dangerouslySetInnderhtml 方法来避免转义。（不到万不得已不要使用）