React渲染 - 流程概述

导语 web前端技术中，有个叫做jsx的模板渲染语法，它是一个JavaScript 的语法扩展，目前逐渐被行业标准化(用的人多了...)。实际上jsx 是来源于一个前端框架 react。在react中除了我们了解的jsx，那么jsx在react的渲染过程是哪个环节生效，以及渲染过程经历了哪些步骤。本文会基于这些点进行概述。

介绍前的建议

1.本文附上了react.render树状图.xmind，此为作者查看/调试react的渲染源码时做的结构笔记。可以下载进行一些函数定位，一些函数代码位置较深且存在部分依赖，以此关联上下文是个不错的选择。

2.作者是基于17版本的react进行解读与调试 -- https://github.com/facebook/react/tree/v17.0.1

3.设置了几个大标题，提前介绍一下有关react的函数，二、三目录可直接跳过。

React中用到的一些Object设置对象属性方法

React中自带的常用方法

React中的常用名词

jsx简述

比如如下代码:

代码语言：javascript复制

ReactDOM.render(<div><h1>Hello, world!</h1><p>React to Render</p></div>,document.getElementById('root'));

这样就简单完成了页面的渲染。这其中经历了：

1.jsx经过babel打包转换成js语法 (@babel/helper-builder-react-jsx-experimental)

2.react执行render函数，进行节点的遍历渲染并绑定事件

如果拿刚才上述的代码进行babel转换，那么可以得到如下具体执行的jscode:

代码语言：javascript复制

ReactDOM.render(     /*#__PURE__*/    React.createElement("div",    null,     /*#__PURE__*/    React.createElement("h1", null, "Hello, world!"),    /*#__PURE__*/     React.createElement("p", null, "React to Render")),     document.getElementById('root') );

附上一个在线jsx转换地址: https://babeljs.io/repl/

如果同学们需要了解具体的转换语法，可以从 @babel/preset-react 中入口寻找依赖，具体的实现在 @babel/helper-builder-react-jsx-experimental、@babel/helper-plugin-utils

作者仅简单关联了上下文，这里稍作截图：

我们会在webpack打包后的代码中看到 "_source","jsxFileName" 关键字。

这里的@babel/helper-plugin-utils还有一个作用：dev环境时在打包过程中输出文件代码块的位置，以便于调试定位,处理会返回输出的一个只读属性 "__source",其中包含 { fileName:path, lineNumber:number, columnNumber:number }

所以，jsx语法与渲染的执行代码没有存在关联，react通过babel转换成原生js进行处理执行。转换后的createElement即为创建节点。