React框架概述
React框架概述
- 1 React简介
-
- 1.1 React概述
- 1.2 React开发环境搭建
- 1.3 第一个React应用
- 1.4 React虚拟DOM
- 1.5 ReactDOM.render()方法
- 1.6 React的渲染机制
- 1.7 React优势
- 1.8 React脚手架
- 2 React JSX
-
- 2.1 JSX介绍
- 2.2 JSX的应用
- 2.3 JSX算数表达式
- 2.4 JSX条件表达式
- 2.5 JSX嵌入表达式
- 2.6 JSX对象表达式
- 2.7 JSX函数表达式
- 2.8 JSX数组表达式
- 2.9 JSX样式表达式
- 2.10 JSX注释表达式
- 3 React组件与Props
-
- 3.1 React组件介绍
- 3.2 React函数组件
- 3.3 类组件
- 3.4 React组合组件
- 3.5 React Props介绍
1 React简介
1.1 React概述
- 是JavaScript的库，可以简化可视化界面的开发
- 是基于JSX语法（JavaScript Xml），JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写
- 核心是组件，将数据和逻辑进行封装。提高了代码复用率，降低了代码维护的难度。
1.2 React开发环境搭建
1、基本应用（传统应用）：在页面文件中导入React的核心库（.js文件），可以引入官网上的地址，也可以自己下载之后本地引入。
（1）核心库：react.development.js
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin>script>
<script src="../react的js库/react.development.js">script>
(2)与DOM相关的库：react-dom.development.js
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin>script>
<script src="../react的js库/react-dom.development.js">script>
（3）babel编译器库：将ES6转换成ES5
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script src="../react的js库/babel.min.js">script>
2、脚手架开发：搭建React项目，根据不同的需求开发组件
（1）create-react-app：属于FacdBook，快速的、不做任何配置的构建React开发环境
npm install -g create-react-app
（2）create-react-app构建的react开发环境是基于webpack+ES6
1.3 第一个React应用
首先引入库文件：
<script src="../react的js库/react.development.js">script>
<script src="../react的js库/react-dom.development.js">script>
<script src="../react的js库/babel.min.js">script>
在body标签中编写JavaScript代码：
<div id="example">div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById("example")
)
script>
1.4 React虚拟DOM
React框架的核心优势之一， 就是支持创建虚拟DOM来提高页面性能。那么，什么是虚拟DOM呢？其实， 虚拟DOM这个概念很早就被提出来了， 是相对于实际DOM而言的。
设计人员在设计传统HTML网页的UI时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上， 都是需要通过操作实际DOM来实现的。
于是， 问题也就自然出现了。对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际DOM， 往往会带来访问性能的严重下降， 用户体验也会随之变差， 这些都是设计人员所不希望看到的。因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。
React DOM类似于一种将相关的实际DOM组合在一起的集合， 是React的虚拟DOM对象，内置对象，将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为虚拟DOM。
示例代码：传统的（实际）DOM
<div id="app">div>
<script>
// 获取页面中的div
let div = document.getElementById("app");
// 创建span标签
let span = document.createElement("span");
// 创建h3标签
let h3 = document.createElement("h3");
h3.innerHTML = "橘猫吃不胖";
// 创建p标签
let p = document.createElement("p");
p.innerHTML = "新年快乐";
// 将h3和p都添加到span中
span.appendChild(h3);
span.appendChild(p);
// 将span添加到div中
div.appendChild(span);
script>
示例代码：虚拟DOM
<div id="react-div">div>
<script type="text/babel">
let reactDiv = document.getElementById("react-div");
//创建虚拟的DOM元素
//React.createElement中3个参数表示元素名字，空对象以及对象中的内容
const reactH3 = React.createElement("h3", {}, "橘猫吃不胖");
const reactP = React.createElement("p", {}, "新年快乐");
const reactSpan = React.createElement("span", {}, reactH3, reactP);
//将span渲染到div中去
ReactDOM.render(reactSpan, reactDiv);
script>
1.5 ReactDOM.render()方法
render函数：渲染函数，将react的虚拟DOM元素渲染到页面中
ReactDOM.render(element,container[,callback])
element参数：必须，表示渲染的源对象（元素或组件）
container参数：必须，表示渲染的目标对象（元素或组件）
callback参数：可选，用于定义回调函数
1.6 React的渲染机制
React框架之所以大受欢迎， 其特有的渲染机制是非常重要的因素之一。既然提到React 渲染机制， 那么就说一说Diff算法， 该算法是支撑React渲染机制的核心技术之一。
Diff算法的核心就是扫描DOM树，通过扫描找到DOM树前后的差异。若DOM树的状态或属性发生改变，React会构建新的DOM树，将新的DOM树和原来的DOM树进行比较，找到树中变化的部分进行修改。好处是避免重复的频繁的操作DOM，提高页面的访问性能。
1.7 React优势
声明式设计：React 采用声明范式，可以轻松描述应用。
高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活：React可以与已知的库或框架很好地配合。
使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。
组件复用：通过React构建组件使得代码易于复用，可在大型项目应用开发中发挥优势。
单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。
1.8 React脚手架
create-react-app 是来自于Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。
安装create-react-app
npm install -g create-react-app
创建项目
create-react-app my-app
进入项目所在目录
cd my-app
启动项目
npm start
2 React JSX
2.1 JSX介绍
JSX是JavaScript XML的缩写，是JavaScript的语法的扩展，支持自定义属性，是react的内置的语法，其基本语法格式为
const 元素名 = (
<根标签名>
<子标签></子标签>
</根标签名>
);
注意：
（1）创建元素时必须有一个根标签，该根标签是一个容器，里面可以包含其他的标签
（2）在react的脚手架项目中可以使用空标签（<>）作为根标签
若要在React项目中使用JSX语法， 则必须引用“babel.js”来解析JSX，且在