react-createElement--如何从实现缘由拆解实现

本系列将遵从黄金圈去思考 不会过多的去纠结源码的细节，而是去关注，到底为什么这么去做，背后体现的思想到底是什么

我初始陷入了如何最大限度去还原这个react源码，但是尝试了一段时间后发现，效果很不好，而且我并没有真正去理解源码为什么这样去做？ 我认为，深刻的理解为什么这样做，而不是纠结于具体怎完全还原源码，从学习角度价值不高。

createElement

回到这个jsx，我理解的jsx本质就是一个对象，一个包含有当前元素各种信息以及优先级相关的信息。

那为什么要有这个jsx

其实核心原理就是可以通过声明式写法，来描述试视图提升了开发的效率

那jsx本质是什么

其实就是createElement的一个语法糖。 在react 中就是去负责传递当前元素参数，最终生成一个这样的包含有当前标签信息的对象其实就是一个虚拟DOM 通过这个js来模拟真实dom 为什么就是为了将来避免直接操作dom，造成昂贵的渲染问题。 同时也为了将来和currentfiber做协调找最小差异更新，再去打补丁到真实dom上以实现最小变更

不过

基本的一个实现思路

首先拆解一下这个问题。 这个函数的入参，应该是当前标签的一属性以及传.递的props 首先这里面体现了一个拆分解耦的一个过程. 首先这个思路上，自己先去思考一个问题，这个东西是什么？ 是一个reactCreateElement 的一个语法糖 那么这个语法糖怎么去使用呢

。

首先要去实现一个函数，首先应该要去关心的是如这个函数的参数是什么 返回值是什么 对于一个createElement结合babel转义工具来看 入参应该是type, config 一些非原生属性，以及key值。 返回值来看的话，应该是一个对象，什么样的对象呢，一个包含有当前元素的类型key 等信息的对象

最后才是去关注一些边界情况，比如里面config参数可能携带key,或者ref,反而需要高优先级别去处理。

``

const createElement = (type, key, ref, props) => {
  return {
    // 源码里为啥用这个
    $$typeof: REACT_ELEMENT_TYPE,
    props,
    key,
    type,
    ref,
    props
  }
}
function JSXDev(
  type, config, maybeKey
) {
  let ref = undefined;
  let key = null;
  let props = {};
  if (maybeKey.key) {
    key = maybeKey.key
  }

  if (config.key !== undefined) {
    key = '' + config.key
  }

  if (config.ref !== undefined) {
    ref = config.ref
  }


  for (let key in config) {
    if (config.hasOwnProperty(key)) {
      props[key] = config[key]
    }

  }

  return createElement(type, key, ref, props)

}