【 React 】React JSX 转换成真实DOM的过程？

原创

已于 2024-03-19 12:05:39 修改 · 776 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2024-03-19 12:03:11 首次发布

本文详细解释了React中如何通过JSX映射到屏幕，组件状态变化的更新机制，以及组件的分类（原生标签、文本节点、函数组件和类组件）。还介绍了React.createElement的转换过程和ReactDOM.render的渲染策略，包括虚拟DOM的创建和更新优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 是什么

react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后React会将这些「变化」更新到屏幕上
在前面文章了解中，JSX通过babel最终转化成React.createElement这种形式，例如：

<div>
     < img src="avatar.png" className="profile" />
    <Hello />
</div>

会被babel 转换成如下：

React.createElement(
    "div",
    null,
    React.createElement("img", {
   
   
        src: "avatar.png",
        className: "profile"
    }),
    React.createElement(Hello, null) 
);

在转化过程中，babel在编译时会判断JSX中组件的首字母：

当首字母为小写时，其被认定为原生DOM标签，createElement的第一个变量被编译为字符串
当首字母为大写时，其被认定为自定义组件，createElement的第一个变量被编译为对象

最终都会通过RenderDOM.render(…)方法进行挂载，如下：

ReactDOM.render(<App />, document.getElementById("root"));

2. 过程

在react中，节点大致可以分成四个类别：

原生标签节点
文本节点
函数组件
类组件

如下所示：

class ClassComponent extends Component {
   
   
    static defaultProps = {
   
   
        color: "pink"
    };
    render() {
   
   
        return ( 
            <div className="border"> 
                <h3>ClassComponent</h3> 
                <p className={
   
   this.props.color}>{
   
   this.props.name}</p >
            </div>