React的渲染流程

猛扇赵四那半好嘴

已于 2025-06-10 10:39:39 修改

阅读量1.2k

点赞数 29

CC 4.0 BY-SA版权

文章标签： react.js javascript ecmascript

于 2025-01-17 08:34:48 首次发布

本文链接：https://blog.csdn.net/m0_60189088/article/details/144824447

一、Babel的转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="../lib/react.js"></script>
    <script crossorigin src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>
    <script type="text/babel">
        class App extends React.Component {
            constructor(){
                super()
                this.state = {
                    message:"hello world"
                }
            }
            render(){
                return(
                    <div>
                        <div className="header">header</div>
                        <div className="content">
                            <ul>
                                <li>列表数据1</li>
                                <li>列表数据2</li>
                                <li>列表数据3</li>
                                <li>列表数据4</li>
                                <li>列表数据5</li>
                            </ul>
                        </div>
                        <div className="footer">footer</div>
                    </div>
                )
            }
        }
        const root = ReactDOM.createRoot(document.querySelector("#root"))
        root.render(<App/>)
    </script>
</body>
</html>

render 函数中的代码经过 Babel ，将代码进行转化，每遇到一个标签将元素转化成 React.createElement("div",{class,id},[]) ，子元素通过嵌套关系形成一个树结构，这个树结构就是指虚拟 DOM ，根据虚拟 DOM 最终渲染出一个真实 DOM 。

实际上， jsx 仅仅只是 React.createElement(component,props,..children) 函数的语法糖。所有的 jsx 最终都会被转换成 React.createElement 的函数调用。

createElement 需要传递三个参数：

参数一：type

当前 ReactElement 的类型；
如果是标签元素，那么就使用字符串表示 "div" ；
如果是组件元素，那么就直接使用组件的名称。

参数二：config

所有 jsx 中的属性都在 config 中以对象的属性和值的形式存储；
比如传入 className 作为元素的 class 。

参数三：children

存放在标签中的内容，以 children 数组的方式进行存储；
当然，如果是多个元素， React 内部有对它们进行处理。

使用 babel 工具将代码转化为原生 js 后：

‌_jsx‌：这是 Babel 在转换 JSX 时生成的一个函数，用于将 JSX 语法转换为普通的 JavaScript 代码。例如，<div>Hello</div>会被转换为React.createElement('div', null, 'Hello')。这个函数通常用于优化性能，因为它减少了在每次渲染时重新创建元素的需要‌。

_jsxs‌：这是 Babel 在处理多个子元素的 JSX 时使用的函数。与 _jsx 类似， _jsxs 用于将多个子元素的 JSX 转换为 JavaScript 代码。例如，<div><p>Hello</p><p>World</p></div>会被转换为React.createElement('div', null, React.createElement('p', null, 'Hello'), React.createElement('p', null, 'World'))。这个函数同样是为了优化性能，减少不必要的元素创建‌。

二、虚拟DOM的创建过程

我们通过 React.createElement 最终创建出来一个 ReactElement 对象，这是一个 js 对象，是一个虚拟节点，是元素对象形式在 js 中的一种表示。

ReactElement 对象得作用：

原因是 React 利用 ReactElement 对象组成了一个 JavaScript 的对象树；
JavaScript 的对象树就是虚拟 DOM对象 (Virtual DOM) 。

虚拟 DOM 的作用：

更新数据时候不需要更新所有 dom ，使用 diff 算法对新旧 dom 进行对比，只更新数据发生改变的 dom ；
跨平台ReactNative：虚拟 DOM 通过 React 可以渲染成 web 的元素，还可以渲染成 iOS 和 Android 控件，用 React 语法写原生代码。
虚拟 DOM 帮助我们从命令式编程转到了声明式编程的模式