真正吃透React知识链路与底层逻辑, Part1

TechExplorer99

已于 2022-10-17 09:15:34 修改

阅读量187

点赞数 1

文章标签：前端 javascript 开发语言

于 2022-10-12 09:38:36 首次发布

本文链接：https://blog.csdn.net/TechExplorer99/article/details/127269326

版权

1. JSX是什么

JSX是一种ES5之后流行的语法糖。这种语法糖的本质是React.createElement()。

在多重嵌套的JSX里面，React.createElement也是被重复嵌套使用的。

以下是JSX变成真是DOM的过程：

编译，babel起到了将JSX翻译为较低等级的浏览器也能支持的语法也就是React.createElement(type, [props], [...children])
然后，React.createElement，将传入参数进行格式化并且返回React.Element，也就是虚拟DOM
1. React.Element其实就是一个Object的实例，里面的参数包含，$$typeof, type, key, ref, owner，props={children}
最后所有的React.Element都会被返回到最上层的那个React.Element里面成为一个特别大的object
这个object会被ReactDOM.render拿来render，然后就会成为真实的DOM
1. ReactDOM.render(element, container, [callback])
2. element这里就是React Element
3. container是真实DOM里面的一个容器