React进阶学习一JSX

目录

一.JSX是什么？

二.JSX在JavaScript中如何生效。

1.JSX在react中会被Babel编译为React.createElement(),同时React.createElement()将会返回一个ReactElement的JS对象，生成虚拟DOM，再通过ReactDOM.render（），将虚拟DOM和真实DOM挂载。

2.什么是createElement？

3.什么是ReactElement？

4.通过ReactDOM.render(),将虚拟DOM和真实的DOM（一般为root）挂载。

---

一.JSX是什么？

JSX是JavaScript的一种语法扩展，它类似于一种模板语言，你可在JSX中同时使用html标签（或者自定义标签）和逻辑控制语句。

二.JSX在JavaScript中如何生效。

1.JSX在react中会被Babel编译为React.createElement(),同时React.createElement()将会返回一个ReactElement的JS对象，生成虚拟DOM，再通过ReactDOM.render（），将虚拟DOM和真实DOM挂载。

2.什么是createElement？

/**
 * @param type (用于标识节点的类型)
 * @param config (以对象形式传入，组件所有的属性都会以键值对的形式存储在config对象中)
 * @param children (以对象形式传入，记录组件之间的嵌套内容)
 */
export function createElement(type,config,children)

 下面是一段JSX代码。

        <div className="Wrapper">
            <div className="top">
                <p className="pOne">JSX是javaScript的一种扩展</p>
                <p className="pTwo">它类似于一个模块语言</p>
            </div>
            <div className="buttom">
                <p className="pThree">
                    JSX在react中会被Babel编译为React.createElement()
                </p>
                <p className="pFour">
                    同时React.createElement()将会返回一个ReactElement的JS对象
                </p>
            </div>
        </div>

下面是被Babel编译为React.createElement()后的样子。

React.createElement("div", {
    className: "Wrapper",
}, React.createElement("div", {
    className: "top",
}, React.createElement("p", {
    className: "pOne",
}, "JSX是javaScript的一种扩展"),React.createElement("p", {
    className: "pTwo",
}, "它类似于一个模块语言")),React.createElement("div", {
    className: "buttom",
}, React.createElement("p", {
    className: "pThree",
}, "JSX在react中会被Babel编译为React"),React.createElement("p", {
    className: "pFour",
}, "同时React.createElement()将会返回一个ReactElement的JS对象")))

3.什么是ReactElement？

它将传入的参数按照一定的规范进行组装（成为一个虚拟DOM）并返回。

4.通过ReactDOM.render(),将虚拟DOM和真实的DOM（一般为root）挂载。

ReactDOM.render()的参数，结构

 虚拟DOM和真实DOM挂载。