记录一些学习 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 的博客
未完待续