實現(xiàn)三個接口：React.createElement, React.Component,ReactDom.render

在src目錄下創(chuàng)建一個react目錄 /src/react/index.js
**

function createElement() {
  console.log(arguments)
}
const React = {
  createElement
}
export default React;

在index.js里面引入 react/index.js
**

import React from "./react";

更新index.js：為createElement添加參數(shù)并返回結果對象

function createElement(type, props,...children){
  // 父元素需要子元素返回結果，這里可以通過JSX編譯后的代碼得出結論 
  props.children = children;
  return {type,props}
}
export default {createElement}

render

• 在src下創(chuàng)建一個react-dom /src/react-dom/index.js
• 創(chuàng)建一個render函數(shù)，能夠將vdom渲染出來，這里先打印vnode

function render(vnode, container) {
    container.innerHTML = `<pre>${JSON.stringify(vnode, null, 2)}</pre>`   
}

export default {render}

image-20200821095503271.png

• 在當前文件下需要將虛擬dom轉化成真實dom
• 處理原生標簽、類組件、函數(shù)組件&&各種屬性、事件

首先要區(qū)分一下type是=原生標簽、類還是函數(shù)，聲明一個createVNode方法去將虛擬dom包裝一下

export function createVNode(vtype, type, props) {
    const vnode = { vtype, type, props};
  return vnode;
}

在react/index.js的createElement方法里去判斷type類型 并將vtype做標識

import {createVNode} from '../react-dom/react-vdom';
function createElement(type, props, ...children) {
    props.children = children
    delete props.__source;
    delete props.__self;
    let vtype;
    if (typeof type === 'string') {
        //原生標簽
      vtype = 1;
    } else if (typeof type === 'function') {
            if (type.isClassCompoent) {
                //類組件
        vtype = 2;
      } else {
        //函數(shù)組件
        vtype = 3;
      }
    }
    return createVNode(vtype, type, props)
}
export class Component {
  static isClassComponent = true;
  constructor(props) {
    this.props = props;
    this.state = {};
  }
}

看頁面輸出，每個對應的組件vdom已經(jīng)有了標識，接下來就按這個標識對vdom進行處理

• 在react-vdom文件下 聲明一個initVNode方法，將虛擬dom抓轉化成真實dom

  function initVNode(vnode) {
    const { vtype } = vnode;
    if (!vtype) {
      //沒有vtype代表是文本節(jié)點
      return document.createTextNode(vnode);
    } else if (vtype === 1) {
      //原生標簽
      return createElementTag(vnode)
    } else if (vtype === 2) {
      //class
      return createClassComp(vnode)
    } else if (vtype === 3) {
      //函數(shù)
      return createFuncComp(vnode)
    }
  }
  

• 對這三個方法進行擴展處理

function createElementTag(vnode) {
  const { type, props } = vnode;
  const node = docunment.createElement(type);
  //處理特殊屬性
  const { key, children, ...rest } = props;
  Object.keys(rest).forEach(i => {
    // 處理特殊屬性，例如className、htmlfor、style等屬性
    if (i === 'className') {
      node.setAttribute('class', rest[i]);
    } else if (i === 'style' && typeof rest[i] === 'object') {
      const style = Object.keys(rest[i]).map(s => s + ':' + res[i][s]).join(';');
      node.setAttribute('style', style);
    } else if (/on\w+/.test(i)) {
      //通過正則對事件進行處理
      const event = i.toLowerCase();
      node[event] = rest[i];
    } else {
      node.setAttribute(i, rest[i]);
    }
  })
  //遞歸渲染子元素
    children.forEach(dom => {
    if (Array.isArray(dom)) {
      dom.forEach(n => node.appendChild(initVNode(dom)));
    } else {
        node.appendChild(initVNode(dom)); 
    }
  })
  return node;
}
// 對class類聲明的組件進行處理
function createClassComp(vnode) {
  const {type, props} = vnode;
  const vdom = new type(props).render();
  return initVNode(vdom);
}
// 對function聲明的組件進行處理
function createFuncComp(vnode) {
  const {type, props} = vnode;
  const vdom = new type(props);
  return initVNode(vdom);
}

• 最后在/react-dom/index.js里面講initVNode方法進行調(diào)用 看下頁面結果

import {initVNode} from './react-vdom'
function render(vnode, container) {
    //container.innerHTML = `<pre>${JSON.stringify(vnode, null, 2)}</pre>`  
     const node = initVNode(vnode);
     container.appendChild(node); 
}

export default {render}

jsx:

import React, {Component} from './react';
import ReactDOM from './react-dom';
console.log(ReactDOM)

function Comp (props) {
return <h2>{props.name}</h2>
}

class Comp2 extends Component {
    render () {
        return (
            <div>
                <h2>hi {this.props.name}</h2>
            </div>
        )
    }
}

const users = [
    {
        name: '123',
        age: 12
    },
    {
        name: '1xzc23',
        age: 13
    }
]
const ele = (
    <div className="active" style={{color: 'red'}} onClick={() => alert('clcik')}>
        <span>hello</span>
        <Comp name="hi,function"></Comp>
        <Comp2 name="hi,class"></Comp2>
        {/* <ul>
            {users.map(item => {
                return (
                <li>{item.name}-{item.age}</li>
                )
            })}
        </ul> */}
    </div>
)
console.log(ele)
ReactDOM.render(ele, document.getElementById('root'));

求贊~