建立你自己的react(二)----createElement方法

前端

你有没有考虑过一个问题，就是为什么react为什么要使用JSX语法糖么？为什么要这样设计呢，他有什么优点呢，我以后可不可以也这样玩呢？

为什么要使用JSX语法？

这其实就是为了实现react的三大特点之一的虚拟dom，那么问题又来了，为什么要使用虚拟dom么，这是啥玩意

什么是虚拟dom

虚拟 DOM 的工作原理是通过 JS 对象模拟 DOM 的节点，是的今天我们讲的createElement函数其实就是把我们写的真实DOM转化为为了JS对象

为什么使用虚拟dom

这其实就要说到虚拟dom的优点了

1. 改善频繁操作真实dom的性能问题，你想想如果我们去操作真实dom是不是涉及到DOM和JS的交流，这种交流是要收费的。第二点就是每次修改后还要涉及到重排和重绘，也会涉及到性能问题。
2. 规避XSS风险：会存在一个$$typeof属性，它是用来标记此对象是一个 ReactElement,React 在进行渲染前会通过此属性进行校验，校验不通过将会抛出上面的错误。React 利用这个属性来防止通过构造特殊的 Children 来进行的 XSS 攻击，原因是 $$typeof 是个 Symbol 类型，进行 JSON 转换后会 Symbol 值会丢失，无法在前后端进行传输。如果用户提交了特殊的 Children，也无法进行渲染，利用此特性，可以防止存储型的 XSS 攻击。
3. 实现跨平台：这个我们前面有说过，这里就不在赘述

createElement函数

让我们继续我们的应用程序，这次我们将替换react代码为我们自己的react版本

我们将开始写我们自己的createElement。

让我们转换这个jsx为js，所以我们可以看到这个createElement方法的调用。

const element = React.createElement(
    "div",
    { id: "foo" },
    React.createElement("a", null, "bar"),
    React.createElement("b")
)

正如前面步骤中看到的，element是一个具有type和props的对象。我们的函数仅仅需要做的是创建这个对象。

我们对props使用展开运算符，对子元素使用剩余参数语法，这样子元素属性将始终是一个数组。

例如：

• createElement("div") 返回

{
  "type": "div",
  "props": { "children": [] }
}

• createElement("div", null, a) 返回

{
  "type": "div",
  "props": { "children": [a] }
}

• createElement("div", null, a, b) 返回:

{
  "type": "div",
  "props": { "children": [a, b] }
}

children 数组也可以包含原始的值像字符串和数字。所以我们将包裹不是一个对象的内容在他自己的元素内，并且对他们创建一个特殊的类型：TEXT_ELEMENT

当children为空的时候，react并不会包裹原始的值或者创建一个空数组，但是这样做可以使我们简化代码，对于我们的库，我们更喜欢简单的代码，而不是性能好的代码。

我们将使用react的createElement。

为了代替他，让我们赐予我们库一个名字。我们需要一个听起来像react的名字。

我们可以叫他Didact。

const Didact = {
 createElement,
}

但是我们仍然想要在这里使用JSX。我们如何告诉babel去使用Didact的createElement替换React的createElement呢？

如果我们有一个像这样的注释

/** @jsx Didact.createElement */
const element = (
<div id="foo">
    <a>bar</a>
    <b />
</div>
)

那么babel编译这个jsx的时候将使用我们定义的方法

参考