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概述

1. 是JavaScript的库，可以简化可视化界面的开发
2. 是基于JSX语法（JavaScript Xml），JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写
3. 核心是组件，将数据和逻辑进行封装。提高了代码复用率，降低了代码维护的难度。

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。

示例代码：传统的（实际&#x