第一章：React基础-CSDN博客

本文链接：https://blog.csdn.net/ZA1782492741/article/details/142799564

1 什么是React？

1.1 React简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 是用于动态构建用户界面的 JavaScript 库(只关注于视图)

1.2 React的特点

声明式设计：React采用声明式设计，使得创建交互式用户界面变得简单。在React中，可以为应用的每一个状态设计简洁的视图，当数据变化时，React能够高效地更新并渲染相应的组件；
组件化：React通过将用户界面分解为小而独立的组件来构建复杂的UI。每个组件都封装了自己的状态和属性，可以独立地进行开发、测试和维护。这种组件化的开发方式提高了代码的可重用性和可维护性；
高效：React通过对DOM的模拟，即使用虚拟DOM（Virtual DOM）技术，来最大限度地减少与真实DOM的交互。当组件状态发生变化时，React会构建一个新的虚拟DOM树并与旧的树进行对比，然后计算出最小的变更集并应用到实际的DOM上。这种优化策略显著提高了应用的性能；
灵活：React具有很高的灵活性，它可以与已知的库或框架很好地配合。无论开发者现在使用什么技术栈，都可以在无需重写现有代码的前提下，通过引入React来开发新功能；
JSX语法：React使用JSX语法，这是一种类似HTML的语法扩展，允许开发者在JavaScript代码中编写类似XML的结构。JSX使得编写组件模板更加直观和易读，同时也方便与其他JavaScript代码进行交互；
单向响应的数据流：react实现了单向响应的数据流，比传统的数据绑定更简单；
生态系统丰富：React拥有庞大而活跃的生态系统，包括众多的第三方库、工具和组件。这使得开发者能够快速构建功能丰富、高效可靠的React应用程序，并且可以在社区中获取支持和资源。

1.3 React的主要原理

虚拟DOM（Virtual DOM）：React通过创建一个虚拟DOM来高效地更新浏览器的真实DOM。
组件（Components）：React中的最小单位是组件，每个组件可以定义自己的HTML结构、样式和交互方式。
状态（State）：React组件的状态用于保存和更新UI数据，状态变化会触发组件的重新渲染；
属性（Props）：组件可以接受外部传入的属性（props），这些属性可以是配置组件的行为（事件）和外观（数据及样式）
JSX语法：React使用JSX，一种JavaScript的语法扩展，来创建HTML-like标记，使得代码更易读和维护。

2 React的基本使用

2.1 React核心

开发React必须依赖三个库：

React ：包含react所必须的核心代；

ReactDOM：React渲染在不同平台所需要的核心代码；

——web端：ReactDOM 会将jsx最终渲染成真实的DOM，显示在浏览器中；

——native端：ReactDOM 会将jsx最终渲染成原生的控件

（例如：Android中的Button,ios中的UIButton）

Babel ：将编写的源代码转换成大多数浏览器都支持的语法。

——例如：es6转es5，将JSX转换成React.createElement() 的语法

2.2 安装引入

2.2.1 CDN引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 React 核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入babel：1. ES6 ==> ES5 2. jsx ==> js （生产环境中不建议使用） -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>
    <script type="text/babel">
        // 1. 创建虚拟 DOM
        const VDOM = <h1>Hello，React</h1>
        // 2. 渲染到页面中的指定 DOM
        // ReactDOM.render(虚拟DOM，真实DOM)
        ReactDOM.render(VDOM,document.getElementById('root'))
    </script>
</body>
</html>

注意：在HTML文件以UMD形式引入React和ReactDOM时，需要先引入React核心库，然后引入ReactDOM 用于支持react操作DOM，因为reactDOM是依赖于React核心库的。

cjs：全称为 CommonJS，是 Node.js 支持的模块规范
umd：全称为 Universal Module Definition 是统一模块定义，是包含 Node.js 使用的 cjs 的，兼容包含浏览器、Node.js 的模块规范。

一般在引入 React 时，会优先使用 umd 版本，可同时支持 Node.js 和浏览器。

2.2.2 NPM引入

前提：确保你已经安装了 Node.js 和 npm

npm install react react-dom

在实际开发中，一般是通过node初始化一个react项目，初始化后的项目中已经包含react react-dom

# 初始化项目
$ npm install -g create-react-app
$ create-react-app my-app
# 或者 初始化项目
npx create-react-app my-app
# 启动项目
$ cd my-app/
$ npm start

引入示例：

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Hello {props.name}!</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// 渲染 Hello 组件，并传递 name 属性
root.render(<Hello name="World" />);

2.3 创建虚拟DOM的方式

2.3.1 JS方式

<script type="text/javascript">
    // 1. 创建虚拟 DOM，语法格式：React.createElement(标签名，标签属性，标签内容)
    const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React'))

    // 2. 渲染到 DOM
    ReactDOM.render(VDOM, document.getElementById('root'))
</script>

2.3.2 JSX方式

<script type="text/babel">
   // 1. 创建虚拟 DOM
    const VDOM = (
        <h1>Hello，
            <span>React</span>
        </h1>
    )
    // 2. 渲染到页面中的指定 DOM
    // ReactDOM.render(虚拟DOM，真实DOM)
    // 参数一：传递要渲染的内容，这个内容可以是HTML元素，也可以是React的组件
    // 参数二：将渲染的内容，挂载到哪一个HTML元素上
    ReactDOM.render(VDOM,document.getElementById('root'))
</script>

注意：这里我们编写React的script代码中，必须添加type="text/babel" ，作用是可以让babel解析jsx的语法。

2.4 React中的虚拟DOM

2.4.1 React中的虚拟OM

更新中。。。

2.4.2 虚拟DOM的实现

初始化阶段：当React首次渲染时，会创建一个虚拟的DOM树，该DOM树与真实的DOM树一一对应，创建的虚拟DOM树是一个JavaScript对象;
JSX解析：在React中，JSX语法用来描述虚拟DOM的结构，JSX语法会被编译成React.createElement函数调用，创建虚拟的DOM节点；

// JSX
const element = <div>Hello, React!</div>;
// 转译后的React.createElement调用
const element = React.createElement('div', null, 'Hello, React!');

更新阶段：当组件状态发生变化时，React会重新生成新的虚拟DOM树。这个新的虚拟DOM树与之前的虚拟DOM树进行比较，找出变化的部分。
差异计算（Reconciliation）： React使用一种称为“协调算法（Reconciliation Algorithm）”的策略来比较新旧虚拟DOM树的差异。更新VirtualDOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。
更新实际DOM：找到差异后，React会根据差异集合执行相应的DOM操作，这可能涉及到节点的创建、更新、删除等操作。这一过程被封装在React的渲染引擎中，开发者无需手动操作实际DOM。

烦请各位大佬指导，持续学习更新中。。。