关于前端:解析-minireact-大概思路

记录一些学习mini-react的解析思路。

该文章解析的mini-react的代码的git地址为
解析的是Peter谭金杰作者的mini-react库
Peter谭金杰 的git地址

这里不做太多 工具的介绍,所以打包工具选用绝对简略的parcel

jsx

在开始之前要先理解一个概念,在react中render或者函数组件中返回的代码,如下:

const title = <h1 className="title">Hello, world!</h1>;

这段代码并不是非法的js代码,它是一种被称为jsx的语法扩大,通过它咱们就能够很不便的在js代码中书写html片段。

实质上,jsx是语法糖,下面这段代码会被babel转换成如下代码

const title = React.createElement(
    'h1',
    { className: 'title' },
    'Hello, world!'
);

有趣味,能够用babel做个测试 babel测试

文章参考
从零本人编写一个React框架 【中高级前端杀手锏级别技能】
hujiulong的博客

未完待续

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理