React框架概述
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React框架概述相关的知识，希望对你有一定的参考价值。
React框架概述
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>
<!-- 创建React虚拟DOM -->
<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，且在<script>标签中必须改用type="text/ babel"属性。原因是： 在使用type="text/babel"属性替换type="text/javascript属性后， 浏览器内置的JavaScript解释器就不会解析<script>标签里的脚本代码， 转而由“babel.js”进行解析， 从而避免React代码与原生JavaScript代码发生混淆。
2.2 JSX的应用
示例代码：
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
const span = (
<span>
<h3>React JSX</h3>
<p>通过jsx语法创建一个元素</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.3 JSX算数表达式
在React JSX中使用JavaScript表达式要使用大括号” ”括起来，可以解析算术表达式。在中放算术表达式即可。
示例代码：
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
const span = (
<span>
<h3>JSX算术表达式</h3>
<p>3+6 = 3 + 6</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.4 JSX条件表达式
在React JSX中使用JavaScript表达式无法使用if条件语句，但是可以使用条件运算符构成
条件表达式来替代if条件语句
示例代码：
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
const span = (
<span>
<h3>JSX条件表达式</h3>
<p>1==1：1 == 1 ? "true" : "false"</p>
<p>1!==1：1 !== 1 ? "true" : "false"</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.5 JSX嵌入表达式
先定义一个变量，可以通过在JSX中引用该变量的方式使用该变量
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
let name = "橘猫吃不胖";
const span = (
<span>
<h3>JSX嵌入表达式</h3>
<p>用户名：name</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.6 JSX对象表达式
在中可以直接以“对象名.属性”方式访问对象
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
let user =
name: "橘猫吃不胖",
age: 10
const span = (
<span>
<h3>JSX对象表达式</h3>
<p>姓名：user.name</p>
<p>年龄：user.age</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.7 JSX函数表达式
可以通过函数的调用来实现对if的使用
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
function userInfo()
return "橘猫吃不胖";
const span = (
<span>
<h3>JSX函数表达式</h3>
<p>userInfo()</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
JSX增强函数表达式：
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
function userInfo(msg)
if (msg)
return msg;
else
return "信息为空";
const span = (
<span>
<h3>JSX增强函数表达式</h3>
<p>userInfo("橘猫吃不胖")</p>
<p>userInfo()</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.8 JSX数组表达式
在数组中存放标签，在中解析数组
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
let arr = [
<p>姓名：橘猫吃不胖</p>,
<p>年龄：10</p>
]
const span = (
<span>
<h3>JSX数组表达式</h3>
<p>arr</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.9 JSX样式表达式
将CSS样式应用到虚拟DOM中
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
let css1 =
color: "red"
let css2 =
color: "orange"
const span = (
<span>
<h3>JSX样式表达式</h3>
<p style=css1>AAAA</p>
<p style=css2>BBBB</p>
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
2.10 JSX注释表达式
在JSX元素中（虚拟DOM）中进行注释，使用的格式是/*注释内容*/。
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
const span = (
<span>
<h3>JSX注释表达式</h3>
/*这是一行注释*/
</span>
)
// 将span添加到root中
ReactDOM.render(span, root);
</script>
3 React组件与Props
3.1 React组件介绍
React组件可以将UI切分成一些独立的、可复用的部件， 这样有助于设计人员专注于构建每一个单独的部件。React组件通过Props可以接收任意的输入值， 因此Props也可以理解为参数的概念。
React语法是基于版本ECMAScript6实现的。因此，React组件除了通过JavaScript函数形式实现，还可以通过ES6 Class(类)的形式来实现。
3.2 React函数组件
函数组件是基于ES6的函数，是轻量级组件（不占用内存空间），React官方提倡使用。
语法为：
// 组件的名称的首字母必须要大写
function Fun()
return (
<标签></标签>
)
使用函数组件时，要将函数名当做标签使用：
<Fun />
示例：在页面上输出Hello World!
<div id认识React框架