深入学习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树插入到页面上