深入学习React笔记1 - JSX和React之间的关系

JSX 其实就是 JavaScript 对象。

我的理解：JSX就是给人看的，方便代码编写。
代码：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class LiuClass extends Component {
  render () {
    return (
      <div>
        <h1 className='title'>Liu</h1>
      </div>
    )
  }
}

ReactDOM.render(<LiuClass />,document.getElementById('root'))

babel通过插件plugin-transform-react-jsx转译

理解：babel转译成React代码，官网截图

JSX是让人快速入手的方法，实际React不是这样，
当然代码是等价的，一个是原生的，一个是通过插件转译成原生的。
转译后的代码：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class LiuClass extends Component {
  render () {
    return (
     React.createElement(
        "div",
        null,
        React.createElement(
          "h1",
          { className: 'title' },
          "Liu"
        )
      )
    )
  }
}

·React.createElement
构建一个JS对象来描述你HTML 的信息(标签、属性、子元素)

参数：
1、type > 标签
2、attributes > 标签属性，没有的话，可以为null
3、children > 标签的子节点

ReactDOM.render功能就是把组件渲染并且构造 DOM 树

渲染并构造dom树插入到页面上