React.js中JSX的原理与关键实现

Posted 前端历劫之路

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React.js中JSX的原理与关键实现相关的知识,希望对你有一定的参考价值。

在开始开发之前,我们需要创建一个空项目文件夹。

安装

  1. 初始化
npm init -y

2.安装webpack相关依赖

npm install webpack webpack-cli -D
  1. 安装babel-loader相关依赖
npm install babel-loader @babel/core @babel/preset-env -D
  1. 安装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:{
    minimizefalse
  }
}
  1. 创建一个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高级程序设计》(第四版)电子书。


- END -

以上是关于React.js中JSX的原理与关键实现的主要内容,如果未能解决你的问题,请参考以下文章

React.js学习之理解JSX和组件

react.js JSX 简介

让 Facebook 的 react.js 库 JSX 语法与 jslint 完美搭配?

与 React JS 的交集观察者

React 的 JSX 简介

REACT JS:映射要在 JSX 中呈现的对象数组