1.React.createElement

我們知道在React17版本之前，我們在項目中是一定需要引入react的。

import React from “react”

即便我們有時候沒有使用到React，也需要引入。原因是什么呢？

在React項目中，如果我們使用了模板語法JSX，我們知道它要先經(jīng)過babel的轉(zhuǎn)譯。那babel會將JSX轉(zhuǎn)換成什么樣子的格式呢？

可以看到，現(xiàn)在的babel會將JSX模板轉(zhuǎn)換成帶有jsx方法的內(nèi)容。但是在17之前，babel是將JSX轉(zhuǎn)換為帶有React.createElement方法的內(nèi)容。

而這也是為什么在17之前我們要引入React才能讓項目正常使用。

2.ReactElement元素

如果我們在項目代碼中，打印一個react元素：

const jsx = <div><span>123</span></div>
console.log(jsx)

可以在控制臺看到：

所以我們通過babel轉(zhuǎn)譯后的內(nèi)容，執(zhí)行完應(yīng)該生成這樣的一個ReactElement對象。
所以在實現(xiàn)jsx方法前，我們可以定義一個ReactElement類（實際的React源碼中是一個方法，但是這里為了好看一些，使用類的結(jié)構(gòu)）。

class ReactElement {constructor(key, props, ref, type) {this.$$typeof = Symbol.for('react.element')this.key = key;this.props = props;this.ref = ref;this.type = type;}
}

3.實現(xiàn)JSX方法

在上面的轉(zhuǎn)譯內(nèi)容我們可以看到，jsx方法接受兩個參數(shù)，第一個參數(shù)是類型：例如div，span或者自定一類型。
第二個參數(shù)是配置參數(shù)：例如class，ref等參數(shù)。

我們只需要將ref，type，key這三個屬性，直接賦值給ReactElement元素。而其他的屬性全部放在props里面就可以了：

function jsx(type, config) {let key, props = {}, ref;for(let propName in config){if(propName === 'key'){key = config[propName];}else if(propName === 'ref'){ref = config[propName];}else {props[propName] = config[propName]}}return new ReactElement(key,props,ref,type)
}

由于遞歸的過程已經(jīng)被babel處理了，所以其實在jsx方法中只需要遍歷即可，并不需要太過復(fù)雜的處理。

4.測試

現(xiàn)在我們使用babel轉(zhuǎn)譯過的內(nèi)容，對jsx方法進(jìn)行測試：

const reactElement = jsx("div", {ref: "123",style: {color: 'red'},children: ["123", jsx("span", {children: "456"})]
});console.log(reactElement)

可以在控制臺看到j(luò)sx方法執(zhí)行的結(jié)果：

以上就是通過babel處理后，react對處理的內(nèi)容做的初步處理。