React 简介 及 JSX语法

最新推荐文章于 2024-07-24 16:25:01 发布
最新推荐文章于 2024-07-24 16:25:01 发布
阅读量913 收藏 1
点赞数 7
分类专栏： React 文章标签： react.js javascript html5 jsx 虚拟DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45654582/article/details/119974235
版权

文章目录

React 简介

React 概述及特点

是一个用于构建用户界面，将数据渲染为HTML视图的开源 JavaScript库

中文官网：React官方中文文档

  • 是 Facebook 开发并于2013年发布并宣布开源
  • 基于 JSX 的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写
  • React核心是 组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装

原生JS的缺点：

  • 原生JavaScript操作DOM繁琐，效率低
  • 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
  • 原生JavaScript没有组件化编码方案，代码复用率低

React的特点：

  • 采用组件化模式、声明式编码，提高开发效率及组件复用率
  • 在React Native中可以使用React语法进行移动端开发
  • 使用虚拟DOM+Diffing算法，尽量减少与真实DOM的交互

组件化：工程化思想在框架中的落地

几乎所有的 可见或者不可见内容 都可以被抽离为各种各样的组件，每个组件既是 封闭 的，又是 开放 的。

  • 封闭：针对 渲染工作流 来说的，在组件自身的渲染工作流中，每个组件都只处理它内部的渲染逻辑
  • 开放：针对 组件间通信 来说的，React允许开发者基于“单向数据流”的原则完成组件间的通信，而组件间之间的通信又将改变通信双方/某一方内部的数据而对渲染结果构成影响

React 虚拟DOM

为什么需要虚拟DOM?

DOM操作是很慢的，而JS却可以很快，直接操作DOM可能会导致频繁的回流与重绘，JS不存在这些问题。因此虚拟DOM比原生DOM更快

React框架的核心优势之一， 就是 支持创建虚拟DOM 来提高页面性能。

虚拟DOM是相对于实际DOM而言的。设计人员在设计传统HTML网页的 UI 时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到 UI 上， 都是需要通过操作实际DOM来实现的。于是，对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际DOM， 往往会带来访问性能的严重下降， 用户体验也会随之变差， 这些都是设计人员所不希望看到的。

虚拟DOM(Virtual DOM): 本质上是JS和DOM之间的一个映射缓存在形态上表现位一个能够描述DOM结构及其属性信息的JS对象

虚拟DOM核心：
在这里插入图片描述
两个阶段:
在这里插入图片描述

因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。React DOM类似于一种将相关的实际DOM组合在一起的集合， 是有区别于传统概念上的DOM元素的，如果将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为 虚拟DOM

React 优势

  • 声明式设计：React 采用声明范式，可以轻松描述应用。
  • 高效：React通过对DOM的模拟,最大限度地减少与DOM的交互。
  • 灵活：React可以与已知的库或框架很好地配合。
  • 使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。
  • 组件复用：通过React构建组件使得代码易于复用，可在大型项目应用开发中发挥优势。
  • 单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。

React 渲染机制

  • React框架之所以大受欢迎， 其特有的渲染机制是非常重要的因素之一。既然提到React 渲染机制， 那么就说一说Diff算法，该算法是支撑React渲染机制的核心技术之一。
  • Diff算法博大精深、涉及的知识点很多，Diff算法的核心就是通过比较找到DOMTree前后的差异。React渲染机制的基本原理就是：在DOM Tree的状态和属性发生改变后， 构造出新的虚拟DOM Tree。
  • 通过Diff算法与原始的虚拟DOM Tree进行比较， 计算出变化的节点并进行更新操作。该算法的优势就是减少了对DOM的频繁重复操作，从而提升页面的访问性能。

React 基本使用

相关js库：

  1. react.js：React核心库。
  2. react-dom.js：提供操作DOM的react扩展库。
  3. babel.min.js：解析JSX语法代码转为JS代码的库。

第一个React应用：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" > /* 此处一定要写babel */
	/*  1、浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行 
    	2、只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
    */

		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

ReactDOM.render()方法： 渲染虚拟DOM

语法格式： ReactDOM.render(element,container[,callback])

作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

参数：

  • element参数：必须，表示渲染的源对象(元素或组件)
  • container参数：必须，表示渲染的目标对象(元素或组件)
  • callback参数：可选，用于定义回调函数

使用JS创建虚拟DOM

<script type="text/javascript" > 
	//1.创建虚拟DOM
	const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

使用JSX创建虚拟DOM

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

关于虚拟DOM：

  • 本质是Object类型的对象（一般对象）
  • 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
  • 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX 语法

JSX 其实就是JavaScript XML的缩写， 直译过来就是基于JavaScript的XML。JSX 看起来似乎是一种XML格式， 其本质仍旧是一种JavaScript语言， 只不过是将JavaScript脚本代码写成XML样式

同时，JSX 作为一种JavaScript语法扩展，支持自定义属性，并具有很强的扩展性。由于JSX是React框架内置的语法， 且专用于React应用开发， 因此建议设计人员使用JSX方式来实现UI中的虚拟DOM。

JSX 语法糖允许前端开发者使用我们最为熟悉的类HTML标签语法来创建虚拟DOM

通过React JSX方式定义的虚拟DOM，最终也会转换为通过createElement()方法实现虚拟DOM

Babel：Babel是一个工具链，主要用于将ECMAScript2015+版本的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 ——Babel官网

var name='zhangsan';
var place='home';

`Hello${name},ready for ${place}?`;

//通过 babel 转化为：
"Hello".concat(name,",ready for").concat(place,"?");
  • 若要在React项目中使用JSX语法， 则必须引用 'babel.js’来解析JSX，且在<script>标签中必须改用 'type=“text/ babel”'属性
  • 原因是： 在使用 'type=“text/babel”'属性 替换 'type=“text/javascript”'属性后， 浏览器内置的JavaScript解释器就不会解析<script>标签里的脚本代码， 转而由 ‘babel.js’ 进行解析， 从而避免React代码与原生JavaScript代码发生混淆

createElement()方法深究

JSX语法在JavaScript生效：

JSX会被编译为 React.createElement()，React.createElement()将返回一个叫做 React Element 的JS对象

语法：createElement(type,config,children)

  • type：用于标识节点的类型
  • config：以对象形式传入，组件所有的属性都会以键值对的形式存储在config对象中
  • children：以对象形式传入，它记录的时组件标签之间嵌套的内容
React.createElement('ul',{
	//传入属性键值对
	className:'list'
	//从第三个入参开始往后，传入的参数都是children
},React.createElement('li',{
	key:'1'
},'1'),React.createElement('li',{
	key:'2'
},'2'));

//以上JSX语法糖等价于
<ul className='list'>
	<li key='1'>1</li>
	<li key='2'>2</li>
<ul>

函数流程图：

在这里插入图片描述

createElement只是一个参数中介，函数返回了一个叫做 React Element 对象
在这里插入图片描述
虚拟DOM的创建示意图：
在这里插入图片描述

经过createElement处理，最终会形成 $$typeof = Symbol(react.element)对象。对象上保存了该 react.element 的信息。

虚拟DOM 经过ReactDOM.render()渲染处理后变成真实DOM

ReactDOM.render(
	//需要渲染的元素(ReactElement)
	element,
	//元素挂载的目标容器（一个真实DOM）
	container,
	//回调函数，可选参数，用来处理渲染结束后的逻辑
	[callback]
)

总结：
在这里插入图片描述

JSX语法规则

  • 定义虚拟DOM时，不要写引号
  • 标签中混入JS表达式时要用 { }
  • 样式的类名指定不要用class，要用className
  • 内联样式，要用style={{key:value}}的形式去写
  • 只有一个根标签
  • 标签必须闭合
  • 标签首字母
    • 若小写字母开头，将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
    • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

一定注意区分：【js语句(代码)】与【js表达式】

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

  1. a
  2. a+b
  3. demo(1)
  4. arr.map()
  5. function test () {}

语句(代码)：

  1. if(){}
  2. for(){}
  3. switch(){case:xxxx}

1、JSX的一般语法形式：

const element=(
    <tag-level-1>
  		 <tag-level-2>
 		 </tag-level-2>
	</tag-level-1>
);

这里使用 const 关键字定义常量名(element) ， 表示JSX代码的名称。<tag-level-i>标签元素表示DOM标签， 且支持多级嵌套的形式。

2、JSX的算术表达式： 用大括号"{}"表示

const reactSpan = (
   <span>
      <h3>JSX算术表达式：</h3>
      <p>
        3+6 = { 3+6 }
      </p>
   </span>
)

3、JSX的条件表达式： 在JSX表达式中不能使用 if语句,但是可以使用 条件表达式(?:构成的表达式)

4、JSX的嵌入表达式： 在外部定义变量,在虚拟的DOM中通过 ‘{}’ 引用变量

5、JSX的对象表达式： 可以通过 “对象名.属性名” 的方式使用

6、JSX函数表达式： 在JSX中可以直接调用JavaScript的函数

YuLong~W
关注
专栏目录
React JSX语法使用案例
04-21
在`.babelrc`中，我们通常会配置`@babel/preset-react`预设，以便Babel能正确处理JSX语法。 `webpack.config.js`是Webpack的配置文件，Webpack是一个模块打包工具，用于处理前端资源。在React应用中，Webpack可以将...
【自学react】react基础了解以及语法
qq_51489068的博客
08-12 82
【自学react】react基础了解以及语法
React框架简介（JSX语法、组件、虚拟DOM渲染）
星河梦~的博客
11-15 2709
目录React框架为什么要学习ReactReact特点React核心JSX语法语法详解React开发过程实际DOM虚拟DOM函数组件类组件虚拟DOM渲染过程 React框架 React是一个JS库，可以简化可视化界面的开发，由Facebook在2013年发布。 为什么要学习React 那么为什么要学习React呢？ 这要先从原生js的痛点出发，原生JS的痛点在于： 用DOM的API去操作DOM，过程十分繁琐，且效率低 用js直接操作DOM，浏览器会进行大量的回流和重绘 原生JS没有组件化，代码复用率低
【React】JSX：从基础语法到高级用法的深入解析
最新发布
lph159的博客
07-24 1218
JSX（JavaScript XML）是一种语法扩展，它让我们可以在 JavaScript 中编写类似 HTML 的代码。它与 JavaScript 紧密结合，并在编译时被转换为 JavaScript 对象。
JSX 语法详解
web00_11的博客
11-14 1万+
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX
JSX语法详解
热门推荐
王浴昊
12-02 8万+
JSX语法详解 本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提
JSX（ JavaScript XML）简介及语法规则
fangqi20170515的博客
07-27 1829
全称。
【黑马教程】React中启用JSX语法
03-27
本代码为 黑马教程 P15，15： https://www.bilibili.com/video/av37668737/?p=15 的实现代码， 配置过程请详看 ：https://blog.csdn.net/wgf5845201314/column/info/35882
JavaScript的React框架中的JSX语法学习入门教程
10-22
JSX，全称JavaScript XML，是React框架中用于构建用户界面的一种特殊语法。它允许开发者在JavaScript代码中使用类似HTML的结构来描述UI组件。JSX的引入使得React组件的编写更加直观和易读，但需要注意的是，JSX并非...
react 转换JSX语法的插件brower.js
09-04
如果是要直接在HTML上编辑，需要下载react.js与react-dom.js。如果要使用JSX语法，则需要使用转换JSX语法的插件。这里使用brower.js brower,js：将使用的JSX语法转换成JavaScript语法
JSX语法及特点介绍_v4
04-25
JSX语法简介 React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX简介 JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来...
React初识--必知必会的jsx核心语法
听雨少年的博客
01-18 2805
文章目录jsx核心语法 必知必会认识jsxJSX是什么？为什么React选择了JSXJSX的书写规范：jsx的使用jsx的注释如何书写jsx嵌入变量一：当变量是Number、String、Array类型时，直接显示二：当变量是null、undefined、Boolean类型时，内容为空三：对象类型不能作为子元素（not valid as a React child）JSX嵌入表达式JSX绑定属性常见属性(src,href...)class属性style内联样式事件绑定this的绑定问题bind显示绑定thi
Vue JSX 快速上手指南【语法篇】
Dreamy_LIN的博客
12-30 2538
在 Javascript 里写 XML，同时拥有 Javascript 的灵活性和 HTML 的语义化。
JSX语法看这一篇就够了-02
编程是一门实践技术
05-24 1476
JSX and React 是相互独立的两种开发语言，它们经常一起使用，但也可以单独使用它们中的任意一个，JSX 是JavaScript 语言的扩展，而 React 则是一个 JavaScript 的库。
JSX语法
m0_71902265的博客
10-30 333
react.js JSX
jsx基本语法
通俗易懂
05-07 4734
jsx 全称: JavaScript XML react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖 作用: 用来简化创建虚拟DOM 写法：var ele = <h1>Hello JSX!</h1> 注意1：它不是字符串, 也不是HTML/XML标签 注意2：它最终产生的就是一个JS对象 标签名任意: HTML标签或其它标签 标签属性任意: HTML标
jsx 基本语法
悟世君子的博客
07-10 2079
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面 1、基本用法 let poetry = '满地斜阳,翠色和烟老。' let jsx = <div>落尽梨花春事了。{poetry}</div> ReactDOM.render( jsx, document.getE.
JSX语法入门基础
WPHunter的编程技术资料库！
01-24 993
在这篇文章中，你将了解什么是JSX，它是如何工作的，以及为什么它对在网络开发中构建动态用户界面很重要。
JSX | TSX 教程
青蛙king的博客
05-25 8599
如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用一款在线的免费的代码转换器工具。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值