Jsx简介与元素渲染

Jsx

• Javascript 的一种语法扩展
• Jsx是一种JavaScript的语法扩展，它可以是变量，可以是表达式，可以使用部分函数，总之，Jsx有着诸多表现方式
• JSX的特性更接近JavaScript而不是HTML, 所以React DOM使用camelCase小驼峰命名来定义属性的名称，而不是使用HTML的属性名称</li>
• 而非采用连接符-

  function jsx () {
    const val = <h3>val</h3>        // 变量
    const exp = <h4>{1+1}</h4>      // 表达式
    const str = <h5>{'string'}</h5>           // 字符串
    const fun = () => {return 'function'}     // 函数定义与调用
    const funCall = <div>{fun()}</div>

    const ele = <div tabIndex="0"></div>      // 属性
    const ele2 = <div dataIndex={val}></div>  // 大括号可以在属性中书写
    return (<div>jsx</div>)
  }

React渲染

• React 最终将一个组件，渲染到指定的根Dom节点中，通过 ReactDOM.render方法
• ReactDOM.render(<App />, document.getElementById('root'));

转换依据（要考）

• Babel 是会将 JSX 转换成一个名为 React.createElement 的方法调用的
• 故下面的代码是完全相同的

const ele = <h1 class='foo'>Hello</h1>

const ele = React.createElement(
  'h1',
  {class: 'foo'},
  'Hello'
)