React概述JSX语法及React组件

Posted 2021-10-28 遥岑.

tags:

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

React概述

React是一个用于构建用户界面的javascript库，用来简化可视化界面的开发。
React主要用来写html页面，或构建Web应用。
它是基于JSX(JavaScript Xml)语法，可以和html、js混合书写。
核心是组件，可以实现用户界面的模块化开发，代码的复用率高、可维护性好。

React的开发过程

导入js文件

<script src="../js/react.development.js"></script> <!-- React的核心库 -->
<script src="../js/react-dom.development.js"></script><!-- React与DOM有关的库 -->
<script src="../js/babel.min.js"></script><!-- 用于将ES6转换成ES5 -->

JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展
需要使用babel编译处理后，才能在浏览器环境中使用
在使用type = 'text/babel’替换type='text/javascript’属性后，浏览器内置的JavaScript解释器就不会解析script标签中的脚本代码，转而由babel.js进行解析，从而避免React代码与原生JavaScript代码发生混淆

创建DOM

createElement(元素名称，元素属性，元素的子节点)

进行DOM的渲染：ReactDOM.render(虚拟的DOM,实际的DOM)

React的虚拟DOM

实际的DOM：传统的HTML的UI设计，承载了数据的呈现和更新，浏览器在呈现DOM之前，要构建一棵DOM树，若该DOM树中的某一点发生了变化，就必须重新构建，对于复杂的DOM，若频繁的重建就会导致页面的性能下降。

虚拟的DOM：先构建一棵虚拟的DOM树，若树中的某一点发生了变化，只进行局部的更新，然后将虚拟的DOM渲染到实际的DOM中。

虚拟DOM的优点：

减少DOM操作

虚拟DOM可以将多次操作合并为一次操作（比如要添加100个节点）
虚拟DOM借助DOM diff可以将多余的操作省掉，部分更新（比如只需要新增10个节点）

跨平台

虚拟DOM不仅可以做DOM，还可以变成小程序、安卓应用，因为虚拟DOM本质上只是一个JS对象

虚拟DOM的缺点：

需要额外的创建函数，像createElement这样，但它可以通过JSX来简化成XML写法

React的渲染原理

React渲染机制的基本原理就是：在DOM Tree的状态和属性发生改变后，构造出新的虚拟DOM Tree。
通过Diff算法与原始的虚拟DOM Tree进行比较，计算出变化的节点并进行更新操作。该算法的优势就是减少了对DOM的频繁重复操作，从而提升页面的访问性能。

执行过程：

初次渲染时，React会根据初始state(Model)，创建一个虚拟DOM对象（树）
根据虚拟DOM生成真正的DOM，渲染到页面中
当数据变化后（setState()，重新根据新的数据，创建新的虚拟DOM对象（树））
与上一次得到的虚拟DOM对象，使用diff算法对比，得到需要更新的内容
最后，React只将变化的内容更新(patch)到DOM中，重新渲染到页面

JSX简介

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML（HTML）格式的代码。
这样的声明式语法更加的直观。

JSX语法的转化过程：
JSX仅仅是createElement()方法的语法糖（简化语法）
通过React JSX方式定义的虚拟DOM，最终也会转换为通过createElement()方法实现虚拟DOM。
JSX语法被@babel/preset-react插件编译为createElement()方法。
React元素：虚拟DOM，是一个js对象，用来描述你希望在屏幕上看到的内容。

JSX语法

JSX的一般语法形式：

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

element中必须有且只能有一个根标签
允许<> </>作为根标签
JSX最好包裹在括号中

JSX的算术表达式：将表达式放在 '{ }'中

<p>{ 9+5 }</p>

JSX的条件表达式：使用条件运算符
在React JSX中使用JavaScript表达式无法使用if条件语句，但是可以使用条件运算符构成条件表达式来替代if条件语句。

<p>{9>5?'正是人间相逢时':'待到晴空月明日'}</p>

JSX嵌入表达式：先定义变量,使用’{ }'来引用变量

let name = '江絮'
<p>{ name }</p>

JSX的对象表达式：可以引用对象,支持’对象名.属性’格式

let obj = {
     name: '江絮',
     age:20,
     address:'长安'
}
<p>{obj.name}</p>

JSX的函数表达式：在’{ }'中调用函数

function show(user) {
     return user.name + user.age
}
<p>用户信息：{show(obj)}</p>

JSX的数组表达式：

let arr = [
    <p key='1'>山南山北雪晴</p>,
    <p key='2'>千里万里月明</p>
]
<p>{arr}</p>

JSX的样式表达式：

css1 : {
    fontSize:20,
    fontStyle:'bold',
    color:'pink'
}
<p style={css1}>遥岑</p>

JSX的注释表达式： { /* 注释的内容 */ }

{/*陪我长大的愿望 借给我半边翅膀*/}

React的组件

使用React就是在用组件。
组件表示页面中的部分功能，组合多个组件实现完整的页面功能。
特点：可复用、独立、可组合。
React组件通过Props可以接受任意的输入值，Props也可以理解为参数的概念。

是基于ES6的语法，React组件可以分为：

函数组件：通过ES5的函数实现
类组件：通过ES6的类实现

函数组件

使用JS的函数（或箭头函数）创建的组件。

//函数组件
function FunComponet(){
    return (
        <p>我是函数组件</p>
    )
}
//渲染	
ReactDOM.render(<FunComponet />,htmlDiv);

函数名称必须以大写字母开头，以此区分组件和普通的React元素
函数组件必须有返回值，表示该组件的结构，返回值可以为null
函数名作为组件标签名

类组件

使用ES6的class创建的组件。

//3.1 获取实际的DOM
const htmlDiv = document.querySelector('#root');

//3.2 创建类组件：类名首字母大写；类必须继承React.Component类
class HelloWorld extends React.Component {
    render(){
          return (
              <h3>西安邮电大学</h3>
          )
    }
}

//3.3 将类标签渲染到实际的DOM中
ReactDOM.render(<HelloWorld/>,htmlDiv);