React入门系列（四）

在Js代码里面写HTML, 其实就是构造了一个个的Dom对象，如果单纯的用JS来写，会非常冗余而且不能很清晰的看清Dom树的结构，因此就有了JSX，直接用HTML的写法在JS中写Dom

{    
   tag: 'div'
   attrs: { className: 'userName', id: 'userId'},
   children: [
       {
           tag: 'div',
           attrs: { className: 'title' },
           children: ['jerry']
       },
       {
           tag: 'div',
           attrs: { id: "content"}
           children: ['1028568']
       }
   ]
}

使用JSX，就会有一个编译的过程，将HTML写的Dom变异成JS对象

为什么会有JavaScript对象呢:
我们在得到一个UI对象时，不一定会把它渲染在普通的页面上，可能会把他渲染在canvas（react-canvas）的上面、或者是react-native上面，因此需要把react-dom单独抽离出来
有了JavaScript对象之后，就可以在数据发生改变需要重新渲染页面的时候，用比较快的算法来操作JS对象(避免直接操作页面上的Dom)，这样可以极大的提高效率，性能得到很大的优化
JSX可以防范XSS攻击
当你通过{html}进行插入html代码的时候，React会自动将html转化成字符串，Reat在重新渲染页面的会后将所有进行转码，确保不会注入任何没显示编写的数据，所有数据的页面渲染之前都会被转成字符串，因此你可以防止XSS攻击
JSX表示对象:
Babel会把JSX转译成React.createElement()函数调用

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

const element = React.createElement(
   'h1',
   {className: 'greeting'}
   'hello, world!'
);

React.createElement()会预先执行一些检查，以帮助你编写无错的代码，但实际上它创建了一个这样的对象:

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

React通过读取这些JavaScript对象来构建Dom树，并且随时保持更新