React JSX语法解析过程和原理

た入场券 2022-11-09 12:41 184阅读 0赞

### 项目中的用法 ###

ReactDOM.render(
        <div>
            <h1>这是标题</h1>
                今天你吃了吗？？？
            <div className="gren" style={ {  color: 'green' }}>
                我应该吃了<br />
                还是没吃
            </div>
        </div>,
        document.getElementById('root')
    );

#### 1.通过 babel-preset 将JSX语法糖转义后： ####

React.createElement("div", { 
      className: "myBox",
      style: { 
        color: 'red',
        "font-size": '14px'
      }
    }, /*#__PURE__*/React.createElement("h1", null, "\u8FD9\u662F\u6807\u9898"), "\u4ECA\u5929\u4F60\u5403\u4E86\u5417\uFF1F\uFF1F\uFF1F", /*#__PURE__*/React.createElement("div", { 
      className: "gren",
      style: { 
        color: 'green'
      }
    }, "\u6211\u5E94\u8BE5\u5403\u4E86", /*#__PURE__*/React.createElement("br", null), "\u8FD8\u662F\u6CA1\u5403"))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70]

#### 2.React.createElement 将babel转义后的代码 生成虚拟的DOM对象 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70 1]

function createElement(type, props, ...childrens) { 
        let ref, key;
        if (props && props.hasOwnProperty('key')) { 
            key = props.key;
            delete (props.key);
        }
        if (props && props.hasOwnProperty('ref')) { 
            ref = props.ref;
            delete (props.ref);
        }
        return { 
            type,
            props: { 
                ...props,
                children: childrens.length <= 1 ? (childrens[0] || '') : childrens,
            },
            key,
            ref
        };;
    }

#### 3.React.reder()执行 将虚拟DOM元素渲染到真实容器DOM中显示 ####

function render(objJSX, container, callback) { 
        let {  type, props, children } = objJSX,
            element = document.createElement(type);
        // 处理props中的属性
        if (props) { 
            let keys = Object.keys(props);
            for (let i in keys) { 
    
                let attr = keys[i],
                    value = props[attr];
                switch (attr) { 
                    case "className":
                        // 处理 className ,直接将className替换为class即可
                        element.setAttribute('class', value);
                        break;
                    case "style":
                        // 处理style 将style中的每一项赋值到DOM元素上
                        Object.keys(value).forEach(item => { 
                            element.style[item] = value[item];
                        })
                        break;
                    case "children":
                        // 如果children 不是数组，将它变成数组，方便下边统一处理
                        if (!Array.isArray(value)) { 
                            value = [value]
                        }
    
                        value.forEach(item => { 
                            // 遍历数组每一项 如果当前项为字符串 创建一个文本节点 追加到DOM元素后边
                            if (typeof item === 'string') { 
                                let text = document.createTextNode(item)
                                element.appendChild(text)
                            } else { 
                                // 不是字符串类型，递归调用render解析
                                render(item, element)
                            }
                        })
                        break;
                    default:
                        // 除以上特殊属性外 将JSX元素上的自定义属性值也放到DOM元素上
                        element.setAttribute(attr, props[attr])
                }
            }
        }
        // 将dom添加到父容器中
        container.appendChild(element);
        console.log("container——>", container);
        // 执行回调函数
        if (callback && typeof callback === 'function') callback()
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70]: /images/20221023/1d14e8a9d86d49339c6619c11b83243b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70 1]: /images/20221023/993e34b399cd4a3c9848e5d6db8c1e7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70 2]: /images/20221023/ec80055ed41e4d738ebe20da1bd2b6bc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关【React】JSX语法

目录一、前言二、JSX介绍三、JSX原理 1、DOM结构示例 2、HTML的JSX结构示例 3、编译之后的

桃扇骨/ 2023年10月16日 14:08/ 0 赞/ 66 阅读

相关 React中JSX语法的详解

1、基本概念： `React` 使用 `JSX` 来替代常规的`JavaScript`。 `JSX` 是按照 `XML` 语法规范的 `JavaScript` 语法扩

落日映苍穹つ/ 2023年07月11日 11:03/ 0 赞/ 19 阅读

相关 react jsx语法

//调用react下面的createElement方法，传入第一个参数是tag //第二个是属性，第三个是子元素集合 import React

港控/mmm°/ 2023年07月06日 11:34/ 0 赞/ 51 阅读

相关 React-jsx语法

jsx语法是 react 的模板语法，是 react 的灵魂；通过该语法可以很方便的创建 react 对象 jsx 不是字符串也不是 html，就是 react 对象，其底层

朴灿烈づ我的快乐病毒、/ 2023年07月03日 07:28/ 0 赞/ 15 阅读

相关 React JSX语法解析过程和原理

项目中的用法 ReactDOM.render( <div> <h1>这是标题</h1> 今

た入场券/ 2022年11月09日 12:41/ 0 赞/ 185 阅读

相关 React学习笔记一——JSX语法规则

> 之前看过两遍关于react基础的视频，每次看完感觉非常懂，但是过一段就会忘记，所以这次再学习自己会做一些笔记记录下来，方便日后的学习，如果对你有帮助，再好不过；通过以下

迈不过友情╰/ 2022年10月09日 00:34/ 0 赞/ 241 阅读

相关浅谈React的JSX语法（一）

最好的解决方案是：通过JavaScript直接生成模板，然后去构建用户界面。为了使其变得更简单，有一个非常简单、可选的类似HTML的语法，通过函数调用即可生成模板的编译器

痛定思痛。/ 2022年06月17日 12:46/ 0 赞/ 242 阅读

相关 react启动jsx语法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年12月14日 03:07/ 0 赞/ 345 阅读

相关 React基础——JSX语法

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的

素颜马尾好姑娘i/ 2021年09月17日 01:56/ 0 赞/ 368 阅读

相关 react jsx语法

jsx语法 (1)遇到{}按照js语法解析,无<>时也按照js语法解析 (2)遇到<>按照html语法解析 (3)遍历时,每一个

ゝ一世哀愁。/ 2021年07月24日 15:17/ 0 赞/ 509 阅读