没用到React为啥我写JSX还需要import它啊？

作者 | 二哲

来源 | web前端开发（web_qdkf）

提问

当我写一个纯函数组件的时候，为什么还特么需要import React from 'react' 代码如下：

从JSX说起

我们还知道想要编译这样的语法有一个Babel插件，。如上JSX会编译成以下数据结构：

既然能知道它会被Babel编译成啥样，那我们只需要解析这个对象即可组装成真正的DOM。

所以React有一个方法，用来解析这编译后的对象

假装实现一个假的React？那我就叫她Tcaer在这我们把createElement方法改写成与Vue一样（在Vue里创建Vdom用得是h方法。虽然我不知道为什么叫h。这么带有颜色的字母。）

同时我们需要配置以下我们的，否则不支持这样的语法编译。

接着我们知道React是通过，挂载我们组装后的DOM。那我们也需要实现一个方法。

再看一遍这张图，我们来实现render方法。

这里其实要做两件事，第一件事是要把vnode转换为DOM，第二件事则是处理attrs设置到DOM上。

关于处理vnode，我们只需要获取tag，然后递归渲染children即可。如下：

DOM处理好后，我们来实现以下。其实要做的处理很简单，className转换为class，解析onXXX事件类型，处理style对象。

剩下的就只是单纯的DOM属性设置了，我们统统setAttribute即可搞定。

于是我们的逻辑代码就类似如下。

把这两个过程实现了之后，我们就可以实现了。

以下是完整代码：

最后我们把它拿去测试一下就好，可以发现效果与React官网上的类似。

整理后的代码都在这里：https://github.com/MeCKodo/tcaer

全文完~

赞赏作者

▲赞赏是对原创作者的一种鼓励与支持