首页
学习
活动
专区
工具
TVP
发布

没用到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

全文完~

赞赏作者

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180727B0BOOC00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券