jsx原理

JSX 原理
要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?
看下面的DOM结构

   <div class='app' id='appRoot'>
    <h1 class='title'>欢迎进入React的世界</h1>
       <p>
          React.js 是一个帮助你构建页面 UI 的库
       </p>
  </div>

上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示：

 {
   tag: 'div',
   attrs: { className: 'app', id: 'appRoot'},
   children: [
   	  {
   		tag: 'h1',
   		attrs: { className: 'title' },
   		children: ['欢迎进入React的世界']
   	 },
   	{
   	    tag: 'p',
   		attrs: null,
   		children: ['React.js 是一个构建页面 UI 的库']
   	}
      ]
}

但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便
很多了。
于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多
了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。
下面代码:

   import React from 'react'
   import ReactDOM from 'react-dom'
   class App extends React.Component {
            render () {
                   return (
                          <div className='app' id='appRoot'>
                          <h1 className='title'>欢迎进入React的世界</h1>
                          <p>
                             React.js 是一个构建页面 UI 的库
                          </p>
                          </div>
                 )
            }
     }
  ReactDOM.render(
            <App />,
             document.getElementById('root')
   )

编译之后将得到这样的代码:

  import React from 'react'
  import ReactDOM from 'react-dom'
  class App extends React.Component {
              render () {
                    return (
                      React.createElement(
                        		"div",
	                            {
								 className: 'app',
								 id: 'appRoot'
	                          	},
                   	  React.createElement(
				   				"h1",
				    			{ className: 'title' },
				  				 "欢迎进入React的世界"
				                    ),
					  React.createElement(
								  "p",
								  null,
								  "React.js 是一个构建页面 UI 的库"
                                  )
                           )
                   )
              }
     }

   ReactDOM.render(
       React.createElement(App),
       document.getElementById('root')
   )

1. ReactDOM.render（）

ReactDOM.render实际即为React初次将vdom渲染至真实dom树的过程，其中包括了创建元素、添加属性、绑定事件等等操作。 是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如div标签

第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性，不能直接定义class而要用className，因为class是javascript中的保留字。例如给input添加className并更改样式：
例

reactDOM是在react-dom引入进来的，不是react
ReactDOM.render(<App />, document.getElementById('root'));

 template指的就是模板，就相当于vue中组件的template模板。像下面的<App/> 指的就是<App></App>
也可以使用const app = <App></App>
写成ReactDOM.render(app, document.getElementById('root'));

2. React.createElement（）

React.createElement` 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等, 语法为

React.createElement(
    type,  （必填，代表的是标签名，eg: ul）
    [props], （选填，代表属性，像className什么的）
    [...children] （选填，子节点，eg：要显示的文本内容 ）
)     
   举例：
React.createElement("h1", {className: "main"}, "Hello React (method 2)");

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编
译的过程:

JSX —使用react构造组件，bable进行编译—> JavaScript对象 —
ReactDOM.render()—>DOM元素 —>插入页面