一、前言

从零到壹实现一个 React
setState 更新
React 生命周期

二、使用 webpack 搭建环境

a bundler for javascript and frinds 原则上只能打包 js 文件，通过 loader 机制，将非 js 文件打包到一起

  • 安装 webpack webpack-cli
  • 安装 babel-loader @babel/core @babel/preset-env
  • 处理 jsx，安装@babel/plugin-transform-react-jsx

webpack 配置

  1. module.exports = {
  2.   entry: {
  3.     main: './main.js',
  4.   },
  5.   mode: 'development',
  6.   module: {
  7.     rules: [
  8.       {
  9.         test: /\.js$/,
  10.         use: {
  11.           loader: 'babel-loader',
  12.           options: {
  13.             presets: ['@babel/preset-env'],
  14.             plugins: [
  15.               [
  16.                 '@babel/plugin-transform-react-jsx',
  17.                 { pragma: 'createElement' },
  18.               ],
  19.             ],
  20.           },
  21.         },
  22.       },
  23.     ],
  24.   },
  25.   optimization: {
  26.     minimize: false,
  27.   },
  28. };

三、在main.js中使用jsx语法表现视图

当前目录：
image.png

  1. function createElement(tarName, attributes, ...children) {
  2.   let ele = document.createElement(tarName);
  3.   for (const attribute in attributes) {
  4.     ele.setAttribute(attribute, attributes[attribute]);
  5.   }
  6.   for (const child of children) {
  7.     if (typeof child === 'string') {
  8.       child = document.createTextNode(child);
  9.     }
  10.     ele.appendChild(child);
  11.   }
  12.   return ele;
  13. }
  15. document.body.appendChild(
  16.   <div id="a" class="c">
  17.     <div>1</div>
  18.     <div>2</div>
  19.     <div>3</div>
  20.   </div>
  21. );
  23. // var a = createElement("div", {
  24. //   id: "a",
  25. //   "class": "c"
  26. // }, createElement("div", null, "1"), createElement("div", null, "2"), createElement("div", null, "3"));

这是就可以在js中去些jsx了

四、渲染自定义组件

将react处理的逻辑分离到rock-react.js中，现在的目录结构
image.png
在main.js 中使用，rock-react.js中处理
main.js代码如下：

  1. import { createElement, Component, renderDOM } from './rock-react.js';
  2. class MyComponent extends Component {
  3.   render() {
  4.     return (
  5.       <div>
  6.         <h1>我是MyComponent</h1>
  7.         {this.children}
  8.       </div>
  9.     );
  10.   }
  11. }
  12. renderDOM(
  13.   <MyComponent id="a" class="c">
  14.     <div>1</div>
  15.     <div>2</div>
  16.     <div>3</div>
  17.   </MyComponent>,
  18.   document.body
  19. );

rock-react.js 代码如下

  1. class ElementWrapper {
  2.   constructor(type) {
  3.     this.root = document.createElement(type);
  4.   }
  5.   setAttribute(name, value) {
  6.     this.root.setAttribute(name, value);
  7.   }
  8.   appendChild(component) {
  9.     this.root.appendChild(component.root);
  10.   }
  11. }
  13. class TextWrapper {
  14.   constructor(content) {
  15.     this.root = document.createTextNode(content);
  16.   }
  17. }
  19. export class Component {
  20.   constructor(content) {
  21.     debugger;
  22.     this.props = Object.create(null);
  23.     this.children = [];
  24.     this._root = null;
  25.   }
  26.   setAttribute(name, value) {
  27.     this.props[name] = value;
  28.   }
  29.   appendChild(component) {
  30.     this.children.push(component);
  31.   }
  32.   get root() {
  33.     if (!this._root) {
  34.       this._root = this.render().root;
  35.     }
  36.     return this._root;
  37.   }
  38. }
  40. export function createElement(type, attributes, ...children) {
  41.   let ele;
  42.   if (typeof type === 'string') {
  43.     // 元素处理
  44.     ele = new ElementWrapper(type);
  45.   } else {
  46.     // 自定义组件处理
  47.     ele = new type();
  48.   }
  50.   // 属性处理
  51.   for (const attribute in attributes) {
  52.     ele.setAttribute(attribute, attributes[attribute]);
  53.   }
  54.   // children处理
  55.   let insertChildren = (children) => {
  56.     for (const child of children) {
  57.       if (typeof child === 'string') {
  58.         // 处理文本节点
  59.         child = new TextWrapper(child);
  60.       }
  61.       // 子元素是数组，递归处理插入到元素上
  62.       if (typeof child === 'object' && child instanceof Array) {
  63.         insertChildren(child);
  64.       } else {
  65.         ele.appendChild(child);
  66.       }
  67.     }
  68.   };
  69.   insertChildren(children);
  70.   return ele;
  71. }
  73. export function renderDOM(component, parentElement) {
  74.   parentElement.appendChild(component.root);
  75. }

此时， 页面已经可以正确渲染自定义组件以及子标签
image.png

五、处理setState

1、 使用range替代根节点，重构rock-react.js

  1. const RENDER_TO_DOM = Symbol('render to dom');
  3. class ElementWrapper {
  4.   constructor(type) {
  5.     this.root = document.createElement(type);
  6.   }
  7.   setAttribute(name, value) {
  8.     this.root.setAttribute(name, value);
  9.   }
  10.   appendChild(component) {
  11.     let range = document.createRange();
  12.     range.setStart(this.root, this.root.childNodes.length);
  13.     range.setEnd(this.root, this.root.childNodes.length);
  14.     component[RENDER_TO_DOM](range);
  15.   }
  16.   [RENDER_TO_DOM](range) {
  17.     range.deleteContents();
  18.     range.insertNode(this.root);
  19.   }
  20. }
  22. class TextWrapper {
  23.   constructor(content) {
  24.     this.root = document.createTextNode(content);
  25.   }
  26.   [RENDER_TO_DOM](range) {
  27.     range.deleteContents();
  28.     range.insertNode(this.root);
  29.   }
  30. }
  32. export class Component {
  33.   constructor(content) {
  34.     this.props = Object.create(null);
  35.     this.children = [];
  36.     this._root = null;
  37.   }
  38.   setAttribute(name, value) {
  39.     this.props[name] = value;
  40.   }
  41.   appendChild(component) {
  42.     this.children.push(component);
  43.   }
  44.   // 使用range，DOM API进行操作
  45.   [RENDER_TO_DOM](range) {
  46.     this.render()[RENDER_TO_DOM](range);
  47.   }
  48. }
  50. export function createElement(type, attributes, ...children) {
  51.   let ele;
  52.   if (typeof type === 'string') {
  53.     // 元素处理
  54.     ele = new ElementWrapper(type);
  55.   } else {
  56.     // 自定义组件处理
  57.     ele = new type();
  58.   }
  60.   // 属性处理
  61.   for (const attribute in attributes) {
  62.     ele.setAttribute(attribute, attributes[attribute]);
  63.   }
  64.   // children处理
  65.   let insertChildren = (children) => {
  66.     for (const child of children) {
  67.       if (typeof child === 'string') {
  68.         // 处理文本节点
  69.         child = new TextWrapper(child);
  70.       }
  71.       // 子元素是数组，递归处理插入到元素上
  72.       if (typeof child === 'object' && child instanceof Array) {
  73.         insertChildren(child);
  74.       } else {
  75.         ele.appendChild(child);
  76.       }
  77.     }
  78.   };
  79.   insertChildren(children);
  80.   return ele;
  81. }
  83. export function renderDOM(component, parentElement) {
  84.   let range = document.createRange();
  85.   // 首尾设置正确的值，有可能有注释节点
  86.   range.setStart(parentElement, 0);
  87.   range.setEnd(parentElement, parentElement.childNodes.length);
  88.   range.deleteContents();
  89.   component[RENDER_TO_DOM](range);
  90. }

2、实现最终的setState的更新

main.js 代码如下：

  1. const RENDER_TO_DOM = Symbol('render to dom');
  3. class ElementWrapper {
  4.   constructor(type) {
  5.     this.root = document.createElement(type);
  6.   }
  7.   setAttribute(name, value) {
  8.     console.log(name.match(/^on([\s\S]+)$/), '///');
  9.     if (name.match(/^on([\s\S]+)$/)) {
  10.       this.root.addEventListener(
  11.         RegExp.$1.replace(/^[\s\S]/, (c) => c.toLowerCase()),
  12.         value
  13.       );
  14.     } else {
  15.       if (name === 'className') {
  16.         this.root.setAttribute('class', value);
  17.       } else {
  18.         this.root.setAttribute(name, value);
  19.       }
  20.     }
  21.   }
  22.   appendChild(component) {
  23.     let range = document.createRange();
  24.     range.setStart(this.root, this.root.childNodes.length);
  25.     range.setEnd(this.root, this.root.childNodes.length);
  26.     component[RENDER_TO_DOM](range);
  27.   }
  28.   [RENDER_TO_DOM](range) {
  29.     range.deleteContents();
  30.     range.insertNode(this.root);
  31.   }
  32. }
  34. class TextWrapper {
  35.   constructor(content) {
  36.     this.root = document.createTextNode(content);
  37.   }
  38.   [RENDER_TO_DOM](range) {
  39.     range.deleteContents();
  40.     range.insertNode(this.root);
  41.   }
  42. }
  44. export class Component {
  45.   constructor(content) {
  46.     this.props = Object.create(null);
  47.     this.children = [];
  48.     this._root = null;
  49.   }
  50.   setAttribute(name, value) {
  51.     this.props[name] = value;
  52.   }
  53.   appendChild(component) {
  54.     this.children.push(component);
  55.   }
  56.   // 使用range，DOM API进行操作
  57.   [RENDER_TO_DOM](range) {
  58.     this._range = range;
  59.     this.render()[RENDER_TO_DOM](range);
  60.   }
  61.   rerender() {
  62.     // 处理range的bug，先插入在删除
  63.     // 保存老得range
  64.     let oldRange = this._range;
  66.     // 创建一个新的range，放到老得range的start位置
  67.     let range = document.createRange();
  68.     range.setStart(this._range.startContainer, oldRange.startOffset);
  69.     range.setEnd(oldRange.startContainer, oldRange.startOffset);
  70.     this[RENDER_TO_DOM](range);
  72.     // 老得range挪到新range之后
  73.     oldRange.setStart(range.endContainer, range.endOffset);
  74.     oldRange.deleteContents();
  75.   }
  76.   setState(newState) {
  77.     if (this.state === null || typeof this.state !== 'object') {
  78.       this.state = newState;
  79.       this.rerender();
  80.       return;
  81.     }
  82.     let merge = (oldState, newState) => {
  83.       for (const p in newState) {
  84.         if (oldState[p] === null || typeof oldState[p] !== 'object') {
  85.           oldState[p] = newState[p];
  86.         } else {
  87.           merge(oldState[p], newState[p]);
  88.         }
  89.       }
  90.     };
  91.     merge(this.state, newState);
  92.     this.rerender();
  93.   }
  94. }
  96. export function createElement(type, attributes, ...children) {
  97.   let ele;
  98.   if (typeof type === 'string') {
  99.     // 元素处理
  100.     ele = new ElementWrapper(type);
  101.   } else {
  102.     // 自定义组件处理
  103.     ele = new type();
  104.   }
  106.   // 属性处理
  107.   for (const attribute in attributes) {
  108.     ele.setAttribute(attribute, attributes[attribute]);
  109.   }
  110.   // children处理
  111.   let insertChildren = (children) => {
  112.     for (const child of children) {
  113.       if (typeof child === 'string') {
  114.         // 处理文本节点
  115.         child = new TextWrapper(child);
  116.       }
  117.       // 自节点为空，跳过这个处理
  118.       if (child === null) {
  119.         continue;
  120.       }
  121.       // 子元素是数组，递归处理插入到元素上
  122.       if (typeof child === 'object' && child instanceof Array) {
  123.         insertChildren(child);
  124.       } else {
  125.         ele.appendChild(child);
  126.       }
  127.     }
  128.   };
  129.   insertChildren(children);
  130.   return ele;
  131. }
  133. export function renderDOM(component, parentElement) {
  134.   let range = document.createRange();
  135.   // 首尾设置正确的值，有可能有注释节点
  136.   range.setStart(parentElement, 0);
  137.   range.setEnd(parentElement, parentElement.childNodes.length);
  138.   range.deleteContents();
  139.   component[RENDER_TO_DOM](range);
  140. }

我们已经可以使用上面的代码，完成下面的小例子了
地址
image.png
此时，不足之处在于，每次更新，会对root跟节点全部更新，下面我们将要改造成局部改变，局部更新

六、虚拟DOM的原理和关键实现

1、去掉this.root这个DOM元素的代理，创建虚拟DOM

  1. const RENDER_TO_DOM = Symbol('render to dom');
  3. export class Component {
  4.   constructor(content) {
  5.     this.props = Object.create(null);
  6.     this.children = [];
  7.     this._root = null;
  8.   }
  9.   setAttribute(name, value) {
  10.     this.props[name] = value;
  11.   }
  12.   appendChild(component) {
  13.     this.children.push(component);
  14.   }
  16.   get vdom() {
  17.     return this.render().vdom;
  18.   }
  20.   // 使用range，DOM API进行操作
  21.   [RENDER_TO_DOM](range) {
  22.     this._range = range;
  23.     this.render()[RENDER_TO_DOM](range);
  24.   }
  25.   rerender() {
  26.     // 处理range的bug，先插入在删除
  27.     // 保存老得range
  28.     let oldRange = this._range;
  30.     // 创建一个新的range，放到老得range的start位置
  31.     let range = document.createRange();
  32.     range.setStart(this._range.startContainer, oldRange.startOffset);
  33.     range.setEnd(oldRange.startContainer, oldRange.startOffset);
  34.     this[RENDER_TO_DOM](range);
  36.     // 老得range挪到新range之后
  37.     oldRange.setStart(range.endContainer, range.endOffset);
  38.     oldRange.deleteContents();
  39.   }
  40.   setState(newState) {
  41.     if (this.state === null || typeof this.state !== 'object') {
  42.       this.state = newState;
  43.       this.rerender();
  44.       return;
  45.     }
  46.     let merge = (oldState, newState) => {
  47.       for (const p in newState) {
  48.         if (oldState[p] === null || typeof oldState[p] !== 'object') {
  49.           oldState[p] = newState[p];
  50.         } else {
  51.           merge(oldState[p], newState[p]);
  52.         }
  53.       }
  54.     };
  55.     merge(this.state, newState);
  56.     this.rerender();
  57.   }
  58. }
  60. class ElementWrapper extends Component {
  61.   constructor(type) {
  62.     super(type);
  63.     this.type = type;
  64.     this.root = document.createElement(type);
  65.   }
  67.   get vdom() {
  68.     return this;
  69.     /*{
  70.       type: this.type,
  71.       props: this.props,
  72.       children: this.children.map((child) => child.vdom),
  73.     };*/
  74.   }
  76.   get vchildren() {
  77.     return this.children.map((child) => child.vdom);
  78.   }
  80.   // setAttribute(name, value) {
  81.   //   if (name.match(/^on([\s\S]+)$/)) {
  82.   //     this.root.addEventListener(
  83.   //       RegExp.$1.replace(/^[\s\S]/, (c) => c.toLowerCase()),
  84.   //       value
  85.   //     );
  86.   //   } else {
  87.   //     if (name === 'className') {
  88.   //       this.root.setAttribute('class', value);
  89.   //     } else {
  90.   //       this.root.setAttribute(name, value);
  91.   //     }
  92.   //   }
  93.   // }
  95.   // appendChild(component) {
  96.   //   let range = document.createRange();
  97.   //   range.setStart(this.root, this.root.childNodes.length);
  98.   //   range.setEnd(this.root, this.root.childNodes.length);
  99.   //   component[RENDER_TO_DOM](range);
  100.   // }
  102.   // 完成虚拟DOM到实体DOM的更新
  103.   [RENDER_TO_DOM](range) {
  104.     range.deleteContents();
  106.     // 自己创建一个root
  107.     let root = document.createElement(this.type);
  109.     // 处理attributes
  110.     for (const name in this.props) {
  111.       let value = this.props[name];
  112.       if (name.match(/^on([\s\S]+)$/)) {
  113.         root.addEventListener(
  114.           RegExp.$1.replace(/^[\s\S]/, (c) => c.toLowerCase()),
  115.           value
  116.         );
  117.       } else {
  118.         if (name === 'className') {
  119.           root.setAttribute('class', value);
  120.         } else {
  121.           root.setAttribute(name, value);
  122.         }
  123.       }
  124.     }
  126.     // 处理children
  127.     for (const child of this.children) {
  128.       let childRange = document.createRange();
  129.       childRange.setStart(root, root.childNodes.length);
  130.       childRange.setEnd(root, root.childNodes.length);
  131.       child[RENDER_TO_DOM](childRange);
  132.     }
  134.     range.insertNode(root);
  135.   }
  136. }
  138. class TextWrapper extends Component {
  139.   constructor(content) {
  140.     super(content);
  141.     this.content = content;
  142.     (this.type = '#text'), (this.root = document.createTextNode(content));
  143.   }
  145.   get vdom() {
  146.     return this;
  147.     /*{
  148.       type: '#text',
  149.       content: this.content,
  150.     };*/
  151.   }
  153.   [RENDER_TO_DOM](range) {
  154.     range.deleteContents();
  155.     range.insertNode(this.root);
  156.   }
  157. }
  159. export function createElement(type, attributes, ...children) {
  160.   let ele;
  161.   if (typeof type === 'string') {
  162.     // 元素处理
  163.     ele = new ElementWrapper(type);
  164.   } else {
  165.     // 自定义组件处理
  166.     ele = new type();
  167.   }
  169.   // 属性处理
  170.   for (const attribute in attributes) {
  171.     ele.setAttribute(attribute, attributes[attribute]);
  172.   }
  173.   // children处理
  174.   let insertChildren = (children) => {
  175.     for (const child of children) {
  176.       if (typeof child === 'string') {
  177.         // 处理文本节点
  178.         child = new TextWrapper(child);
  179.       }
  180.       // 自节点为空，跳过这个处理
  181.       if (child === null) {
  182.         continue;
  183.       }
  184.       // 子元素是数组，递归处理插入到元素上
  185.       if (typeof child === 'object' && child instanceof Array) {
  186.         insertChildren(child);
  187.       } else {
  188.         ele.appendChild(child);
  189.       }
  190.     }
  191.   };
  192.   insertChildren(children);
  193.   return ele;
  194. }
  196. export function renderDOM(component, parentElement) {
  197.   let range = document.createRange();
  198.   // 首尾设置正确的值，有可能有注释节点
  199.   range.setStart(parentElement, 0);
  200.   range.setEnd(parentElement, parentElement.childNodes.length);
  201.   range.deleteContents();
  202.   component[RENDER_TO_DOM](range);
  203. }

2、实现VDOM比对

const RENDER_TO_DOM = Symbol('render to dom');

// 空range处理
function replaceContent(range, node) {
  // if (!range) return;
  range.insertNode(node);
  range.setStartAfter(node);
  range.deleteContents();

  range.setStartBefore(node);
  range.setEndAfter(node);
}

export class Component {
  constructor(content) {
    this.props = Object.create(null);
    this.children = [];
    this._root = null;
    this._range = null;
  }
  setAttribute(name, value) {
    this.props[name] = value;
  }
  appendChild(component) {
    this.children.push(component);
  }

  get vdom() {
    return this.render().vdom;
  }

  // 使用range，DOM API进行操作
  [RENDER_TO_DOM](range) {
    this._range = range;
    this._vdom = this.vdom; // 这是一个getter
    this.render()[RENDER_TO_DOM](range);
  }

  update() {
    let isSameNode = (oldNode, newNode) => {
      // 类型不同
      if (oldNode.type !== newNode.type) return false;
      // 属性不同
      for (const name in newNode.props) {
        if (newNode.props[name] !== oldNode.props[name]) {
          return false;
        }
      }
      // 属性数量不同
      if (
        Object.keys(oldNode.props).length > Object.keys(newNode.props).length
      ) {
        return false;
      }
      // 文本的内容不同
      if (newNode.type === '#text') {
        if (newNode.content !== oldNode.content) return false;
      }
      return true;
    };
    let update = (oldNode, newNode) => {
      // 对比根节点，对比children
      // type, props, children
      // #text content
      if (isSameNode(oldNode, newNode)) {
        //取出oldNode的range替换 新旧节点不一样
        newNode[RENDER_TO_DOM](oldNode._range);
        return;
      }
      // 新旧节点一致
      newNode._range = oldNode._range;

      // 处理children
      let newChildren = newNode.vchildren;
      let oldChildren = oldNode.vchildren;

      if (!newChildren || !newChildren.length) {
        return;
      }

      let tailRange = oldChildren[oldChildren.length - 1]._range;

      for (let i = 0; i < newChildren.length; i++) {
        let newChild = newChildren[i];
        let oldChild = oldChildren[i];
        if (i < oldChildren.length) {
          update(oldChild, newChild);
        } else {
          let range = document.createRange();
          range.setStart(tailRange.endContainer, tailRange.endOffset);
          range.setEnd(tailRange.endContainer, tailRange.endOffset);
          newChild[RENDER_TO_DOM](range);
          tailRange = range;
        }
      }
    };
    let vdom = this.vdom;
    update(this._vdom, vdom);
    this._vdom = vdom;
  }

  setState(newState) {
    debugger;
    if (this.state === null || typeof this.state !== 'object') {
      this.state = newState;
      // this.rerender();
      this.update();
      return;
    }
    let merge = (oldState, newState) => {
      for (const p in newState) {
        if (oldState[p] === null || typeof oldState[p] !== 'object') {
          oldState[p] = newState[p];
        } else {
          merge(oldState[p], newState[p]);
        }
      }
    };
    merge(this.state, newState);
    this.update();
  }
}

class ElementWrapper extends Component {
  constructor(type) {
    super(type);
    this.type = type;
    this.root = document.createElement(type);
  }

  get vdom() {
    this.vchildren = this.children.map((child) => child.vdom);
    return this;
  }

  // 完成虚拟DOM到实体DOM的更新
  [RENDER_TO_DOM](range) {
    this._range = range;
    // range.deleteContents();
    // 自己创建一个root
    let root = document.createElement(this.type);

    // 处理attributes
    for (const name in this.props) {
      let value = this.props[name];
      if (name.match(/^on([\s\S]+)$/)) {
        root.addEventListener(
          RegExp.$1.replace(/^[\s\S]/, (c) => c.toLowerCase()),
          value
        );
      } else {
        if (name === 'className') {
          root.setAttribute('class', value);
        } else {
          root.setAttribute(name, value);
        }
      }
    }

    if (!this.vchildren) {
      this.vchildren = this.children.map((child) => child.vdom);
    }
    // 处理children
    for (const child of this.vchildren) {
      let childRange = document.createRange();
      childRange.setStart(root, root.childNodes.length);
      childRange.setEnd(root, root.childNodes.length);
      child[RENDER_TO_DOM](childRange);
    }

    replaceContent(range, root);
    // range.insertNode(root);
  }
}

class TextWrapper extends Component {
  constructor(content) {
    super(content);
    this.type = '#text';
    this.content = content;
    // this.root = document.createTextNode(content);
  }

  get vdom() {
    return this;
  }

  [RENDER_TO_DOM](range) {
    this._range = range;
    let root = document.createTextNode(this.content);
    replaceContent(range, root);
    // range.deleteContents();
    // range.insertNode(this.root);
  }
}

export function createElement(type, attributes, ...children) {
  let ele;
  if (typeof type === 'string') {
    // 元素处理
    ele = new ElementWrapper(type);
  } else {
    // 自定义组件处理
    ele = new type();
  }

  // 属性处理
  for (const attribute in attributes) {
    ele.setAttribute(attribute, attributes[attribute]);
  }
  // children处理
  let insertChildren = (children) => {
    for (const child of children) {
      if (typeof child === 'string') {
        // 处理文本节点
        child = new TextWrapper(child);
      }
      // 子节点为空，跳过这个处理
      if (child === null) {
        continue;
      }
      // 子元素是数组，递归处理插入到元素上
      if (typeof child === 'object' && child instanceof Array) {
        insertChildren(child);
      } else {
        ele.appendChild(child);
      }
    }
  };
  insertChildren(children);
  return ele;
}

export function renderDOM(component, parentElement) {
  let range = document.createRange();
  // 首尾设置正确的值，有可能有注释节点
  range.setStart(parentElement, 0);
  range.setEnd(parentElement, parentElement.childNodes.length);
  range.deleteContents();
  component[RENDER_TO_DOM](range);
}