React.js中JSX的原理與關鍵實現

在開始開發之前，我們需要建立一個空專案資料夾。

安裝

1. 初始化

npm init -y

2.安裝webpack相關依賴

npm install webpack webpack-cli -D

3. 安裝babel-loader相關依賴

npm install babel-loader @babel/core @babel/preset-env -D

4. 安裝jsx支援依賴

npm install @babel/plugin-transform-react-jsx -D

配置

1. 在根目錄下建立main.js檔案
   此檔案為入口檔案。

2. 在專案根目錄下建立webpack.config.js

module.exports={
  entry:{
    main:'./main.js'
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env'],
            plugins:[['@babel/plugin-transform-react-jsx',{pragma:'createElement'}]] // 自定義設定pragma引數，我也可以設定為我的名字：maomin
          }
        }
      }
    ]
  },
  mode:'development',
  optimization:{
    minimize: false
  }
}

3. 建立一個reactJsx.js檔案
   此檔案為主要邏輯檔案。

開發

reactJsx.js

// 封裝建立Dom節點
class ElementWrapper {
  constructor(type) {
    this.root = document.createElement(type);
  }
  setAttibute(name, value) {
    this.root.setAttibute(name, value);
  }
  appendChild(component) {
    this.root.appendChild(component.root);
  }
}

// 封裝插入文字節點
class TextWrapper {
  constructor(content) {
    this.root = document.createTextNode(content);
  }
}
// 元件
export class Component {
  constructor() {
    this.props = Object.create(null); // 建立一個原型為null的空物件
    this.children = [];
    this._root = null;
  }
  setAttribute(name, value) {
    this.props[name] = value;
  }
  appendChild(component) {
    this.children.push(component);
  }
  get root() { // 取值
    if (!this._root) {
      this._root = this.render().root;
    }
    return this._root;
  }
}
// 建立節點，createElement對照 webapck.config.js 中pragma引數。
export function createElement(type, attributes, ...children) {
  let e;
  if (typeof type === "string") {
    e = new ElementWrapper(type);
  } else {
    e = new type();
  }
  for (let p in attributes) { // 迴圈屬性
    e.setAttribute(p, attributes[p]);
  }
  let insertChildren = (children) => {
    for (let child of children) {
      if (typeof child === "string") {
        child = new TextWrapper(child);
      }
      if (typeof child === "object" && child instanceof Array) {
        insertChildren(child); // 遞迴
      } else {
        e.appendChild(child);
      }
    }
  };
  insertChildren(children);
  return e;
}

// 新增到Dom中
export function render(component, parentElement) {
  parentElement.appendChild(component.root);
}

main.js

import {createElement,Component,render} from './reactJsx.js'

class MyComponent extends Component {
  render(){
    return <div>
      <h1>maomin</h1>
      {this.children}
    </div>
  }
}

render(<MyComponent id="name" class="age">
  <div>xqm</div>
  <div>my girlfriend</div>
</MyComponent>,document.body)

執行

npx webpack

在dist資料夾下建立html檔案，然後引入main.js，開啟html檔案就可以看到效果了。

• 歡迎關注我的公眾號前端歷劫之路

• 回覆關鍵詞電子書，即可獲取12本前端熱門電子書。

• 回覆關鍵詞紅寶書第4版，即可獲取最新《JavaScript高階程式設計》（第四版）電子書。

• 關注公眾號後，點選下方選單即可加我微信，我拉攏了很多IT大佬，建立了一個技術交流、文章分享群，期待你的加入。

• 作者：Vam的金豆之路

• 微信公眾號：前端歷劫之路

​