React 简介 及 JSX语法

Posted YuLong~W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 简介 及 JSX语法相关的知识，希望对你有一定的参考价值。

文章目录

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虚拟DOM

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

虚拟DOM是相对于实际DOM而言的。设计人员在设计传统HTML网页的 UI 时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到 UI 上， 都是需要通过操作实际DOM来实现的。于是，对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际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。

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

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

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的函数

以上是关于React 简介 及 JSX语法的主要内容，如果未能解决你的问题，请参考以下文章

P06:React中JSX语法简介

React之JSX的使用规则及简单代码实例

React的JSX语法及组件

react.js JSX 简介

React的jsx语法，详细介绍和使用方法！

React概述JSX语法虚拟DOM及React组件