react的jsx的渲染原理

已于 2023-09-28 11:00:50 修改
阅读量38 收藏
点赞数
文章标签： react.js javascript 前端
于 2023-09-28 10:54:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51482067/article/details/133377911
版权

jsx代码会被babel转化成React.createElement函数 而这个函数 会创建一个对应的element ，element会形成一个元素树 每一个元素树是一个对象 就是虚拟DOM

大致流程就是（先看红色再看绿色）

这里载babel的在线编译中执行一下

把右边经过编译的代码替换到原jsx中网页也能运行 这也说明了 内部就是这么转换的

不会敲代码的斑马
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
朝阳39的博客
05-23 1171
JSX 代码本身并不是 HTML，也不是 Javascript，在渲染页面前，需先通过解析工具（如babel）解析之后才能在浏览器中运行。可查看 JSX 解析后的效果更早之前，Babel 会把 JSX 转译成一个函数调用，功能与现在的 jsxs 函数类似相当于 vue 的 h 函数例如会被Babel 转译为React.createElement() 会创建对象这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。
React之React渲染原理
Welkin_qing的博客
10-20 1615
文章目录一、react如何将代码显示到页面上（1）JSX生成Element1. JSX语法2. 使用babel对JSX语法进行转换3. 创建虚拟Dom（2）Element生成Dom 一、react如何将代码显示到页面上 每当我们新建react项目时，项目创建成功后，运行npm start后会出现如下界面： 可以观察到时app.js中对该页面进行的设计，代码如下： 观察index.js发现最终代码是在这里执行的： （1）JSX生成Element 1. JSX语法 可以看到第一个张图片中的render函
react初探：JSX渲染
02-13 472
JSX 是JavaScript的扩展语法，具备了JavaScript的全部能力，在react中推荐使用JSX 来作为渲染组件的元素。下面一起来看一下他的语法规则。 import React from 'react'; import ReactDOM from 'react-dom'; // import Hello from '@/component/print.js/Hello'; ...
ReactJS读书笔记一：深入理解JSX
热门推荐
言川的博客
05-18 2万+
JSX语法是react的一大亮点。 之前很不喜欢在js中写模板，因为js字符串换行很麻烦，所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的，特别是当你的网站是前后端分离的时候，如果改一下模板还要找后端的开发，非常浪费时间。 JSX的出现比较完美解决了JS中写模板的问题。简单的说就是 JS 和 HTML和混合着写在一起。 一，JSX基本原理 首先我
react jsx中样式渲染
01-07
1、行内样式渲染 import React from 'react'; import ReactDOM from 'react-dom'; const title = { color:'red' } const songs = [ {id:1,name:'赤西虐对1'}, {id:2,name:'赤西虐对2'}, {id:3,name:'赤西虐对3'...
html-to-jsx:将HTML代码转换为React JSX
05-19
html-to-jsx 一个基本的Visual Studio Code插件，可将html文本转换为JSX字符串 您可以选择html文本并使用快捷键ctrl + alt + x 有很多事情要做 添加功能以验证html代码 添加支持以格式化结果字符串 添加支持以将...
React 元素渲染.pdf
06-12
React 元素可以通过 JSX 语法来创建。例如： ```javascript const element = <h1>Hello, world!; ``` 这里的 `element` 就是一个 React 元素，它代表了一个 `<h1>` 标签，内容为 “Hello, world!”。 ##### 2.2 ...
详解React 的几种条件渲染以及选择
10-17
1. if/else语句：这是最基础的条件渲染方法，在React的render方法中，可以使用if/else进行条件判断，并根据条件返回不同的JSX元素。 2. 三元运算符：它是一种简洁的条件表达式，可以放在JSX代码中，根据条件直接...
React 条件渲染最佳实践小结(7种)
10-14
在React开发中，条件渲染是一项基础且重要的技巧，它允许我们根据特定的条件展示或隐藏组件。本篇文章将深入探讨七种React条件渲染的最佳实践，帮助开发者更高效地编写代码。 1. **If Else条件渲染** 在JavaScript...
React 学习——React.memo（简单、引用类型的prop）
qq_40269801的博客
08-20 514
React React.memo（简单、引用类型的prop） 1、传递一个简单类型的prop，prop变化时组件重新渲染 2、传递一个引用类型的prop，比较的是新值和旧值的引用是否相等;当父组件的函数重新执行时，实际上形成的是新的数组引用； 3、保持引用稳定->useMemo 组件渲染的过程中缓存一个值
react 路由创建与使用
weixin_45561719的博客
08-23 333
2，路由组件 createBrowserRouter。
Zustand：让React状态管理更简单、更高效
最新发布
丫丫不秃头噢---
08-24 246
这个单词在德语里是状态的意思（发音：促stand）
React Hook Form：指南与示例
Yvette Lau的专栏
08-23 340
表单是用户与网站和Web应用程序交互的重要组成部分。验证用户通过表单提交的数据是开发者的一项关键职责。React Hook Form是一个帮助在React中验证表单的库。它是一个没有其他依赖项的精简库，性能优越，使用简单，开发者可以比使用其他表单库写更少的代码。在本指南中，您将学习如何使用React Hook Form库在React中构建表单，而无需使用复杂的渲染属性（render props）或...
使用React和AntDesign构建初始前端项目及路由配置
123
08-20 648
创建React项目，并使用antDesignUI库，配置页面路由
FastAPI+React18开发通用后台管理系统用户功能实战
Python私教
08-21 224
如果你想要完整的代码，或者完整的视频教程，或者一对一的私教课，欢迎留言或者私信。当然，想要实现完整的功能肯定远不止这些代码，这里录制了完整的视频教程如下。先看看登录功能使用FastAPI是怎么开发的。没有登录就访问首页则提示请先登录。这些功能是怎么实现的呢？
react中的useCallback、useMemo、useRef 和 useContext
huhudeni的博客
08-23 817
上一个文章中我们讲述了useState 和 useEffect 这两个最为核心的 Hooks 的用法。理解了它们，基本上就掌握了 React 函数组件的开发思路。在 React 函数组件中，每一次 UI 的变化，都是通过重新执行整个函数来完成的，这和传统的 Class 组件有很大区别：函数组件中并没有一个直接的方式在多次渲染之间维持一个状态。在第 2 节课中你已经知道了，React 组件之间的状态传递只有一种方式，那就是通过 props。这就意味着这种传递关系只能在父子组件之间进行。
react 路由
weixin_42371812的博客
08-21 223
学习了好一段时间，终于学到了react 路由这个环节。不管是哪个语言，也不管是哪个框架，路由的定义都是一样的。所以，我也就不多说废话，直接来实际的。
【前端面试】看react源码，解读useState
hhhh
08-22 873
mount 阶段获取当前 Hook 节点，同时将当前 Hook 添加到 Hook 链表中初始化 Hook 的状态，即读取初始 state 值创建一个新的链表作为更新队列，用来存放更新操作setXxx()，赋值给Hook.queue创建一个 dispatch 方法（即 useState 返回的数组的第二个参数：setXxx()），该方法的用途是用来修改state，赋值给queue.dispatch返回当前 state 和 修改state 的方法（dispatch）
React jsx 和index.js
07-27
React JSX 是一种 JavaScript 的语法扩展，它允许我们在 JavaScript 中编写类似 HTML 的标记。它的目的是让我们能够在 React...而 `index.js` 是 React 应用的入口文件，用于渲染根组件并将其渲染到指定的 DOM 元素上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值