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

ゝ一世哀愁。 2021-09-03 04:12 231阅读 0赞

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

## 安装 ##

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:{ 
        minimize: false
      }
    }

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文件就可以看到效果了。

![66d5fc5109e42de06e7f784674c230dd.png][]

>  *  欢迎关注我的公众号**前端历劫之路**
>  *  回复关键词**电子书**，即可获取12本前端热门电子书。
>  *  回复关键词**红宝书第4版**，即可获取最新《JavaScript高级程序设计》（第四版）电子书。
>  *  关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，期待你的加入。
>  *  作者：**Vam的金豆之路**
>  *  微信公众号：**前端历劫之路**
> 
> ![Image 1][]

[66d5fc5109e42de06e7f784674c230dd.png]: /images/20210813/3ba120c696914c88b139f5f2603bc9c9.png
[Image 1]: