06.createElement代码实现

具体代码变化过程请观看视频，这里把关键代码展示出来：

import { REACT_ELEMENT } from './utils'

function createElement(type, properties = {}, children) {
    let ref = properties.ref || null; // 后面会讲到，这里只需要知道是跟操作DOM相关
    let key = properties.key || null; // 后面会讲到，这里只需要知道这个跟DOM DIFF相关
    // 观察一下react原版代码的createElement函数的返回值会发现有多余的__sorce,__self
    ;['ref', 'key', '__self', '__source'].forEach(key => { // 可能还会有别的属性也不需要，在发现的时候我们再添加需要删除的属性
        delete properties[key] // props中有些属性并不需要
    })
    properties._owner = null
    properties._store = {}
    let props = {...properties}

    if (arguments.length > 3) {
        // 多个子元素, 转化成数组
        props.children = Array.prototype.slice.call(arguments, 2);
      } else {
        // 单个子元素，转化为数组
        props.children = children;
      }


    return {
        $$typeof: REACT_ELEMENT, // 代表着这是React元素，也就是React框架中的虚拟DOM，如果有同学问，老师，难道还有非React——element类型吗，是得，在后续相应的课程中会跟大家解释，这里可以先忽略这个问题
        type, // 虚拟DOM的元素类型
        ref,
        key,
        props
    }
  }
  const React = {
    createElement
  }
  export default React;

06.createElement代码实现 ​

06.createElement代码实现