【前端技术】react渲染 - 流程概述

作者：winkchen 腾讯IEG前端开发工程师

|导语 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

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

三.React中自带的常用方法

四.React中的常用名词

五.jsx简述

比如如下代码:

```

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:

```

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'));

```

如果同学们需要了解具体的转换语法，可以从 @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即为创建节点。

六.创建节点

创建节点的入口代码在 "react/src/React.js" createElement函数

createElement会根据当前的环境，引用不同的创建函数