React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實例分析

更新時間：2023年05月13日 09:34:54 作者：學全棧的灌湯包

這篇文章主要介紹了React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程,結(jié)合具體實例形式分析了虛擬dom的基本原理與實現(xiàn)方法,需要的朋友可以參考下

JSX的本質(zhì)

實際上，jsx僅僅只是 React.createElement(component, props, ...children) 這個函數(shù)的語法糖。

所有的jsx最終都會被轉(zhuǎn)換成React.createElement的函數(shù)調(diào)用。

createElement需要傳遞三個參數(shù):

參數(shù)一:type

當前元素的類型;

如果是標簽元素，那么就使用字符串表示, 例如 “div”;

如果是組件元素，那么就直接使用組件的名稱;

參數(shù)二:config

所有jsx中的屬性都在config中以對象的屬性和值的形式存儲;

比如傳入className作為元素的class;

參數(shù)三:children

存放在標簽中的內(nèi)容，以children數(shù)組的方式進行存儲;

當然，如果是多個元素呢?React內(nèi)部有對它們進行處理，處理的源碼在下方

在這里插入圖片描述

我們知道默認jsx是通過babel幫我們進行語法轉(zhuǎn)換的，所以我們之前寫的jsx代碼都需要依賴babel; 我們可以在babel的官網(wǎng)中快速查看轉(zhuǎn)換的過程: 鏈接: https://babeljs.io/repl/#?presets=react

例如有下面這樣一段jsx代碼

class App extends React.Component {
  constructor() {
    super()
  }
  render() {
    return (
      <div>
        <div className="header">Header</div>
        <div className="content">
          <div>Banner</div>  
          <ul>
            <li>輪播圖1</li>
            <li>輪播圖2</li>
            <li>輪播圖3</li>
            <li>輪播圖4</li>
            <li>輪播圖5</li>
          </ul>
        </div>
        <div className="footer">Footer</div>
      </div>
    )
  }
}
const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

在這里插入圖片描述

那么也就是說我們可以自己來編寫React.createElement代碼:

我們沒有通過jsx來書寫了，界面依然是可以正常的渲染。

另外，在我們編寫原生的React情況下，我們就不需要babel相關(guān)的內(nèi)容了(當然真實開發(fā)中我們是不會編寫原生的React的)

所以，type="text/babel"可以被我們刪除掉了;
所以，<script src="../react/babel.min.js"></script>也可以被我們刪除掉了;

<div></div>
<script src="../lib/../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script>
  class App extends React.Component {
    constructor() {
      super()
    }
    render() {
      const element = React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          className: "header"
        }, "Header"), /*#__PURE__*/React.createElement("div", {
          className: "content"
        }, /*#__PURE__*/React.createElement("div", null, "Banner"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE1"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE2"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE3"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE4"), /*#__PURE__*/React.createElement("li", null, "\u8F6E\u64AD\u56FE5"))), /*#__PURE__*/React.createElement("div", {
          className: "footer"
        }, "Footer"));
        return element
    }
  }
  const app = ReactDOM.createRoot(document.querySelector("#app"))
  app.render(React.createElement(App, null))
</script>