React概述

是一个JavaScript库，旨在简化可视化界面的开发
起源于Facebook的内部项目，于2013年5月开源。
基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写
React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装

中文官网：React中文官方文档

框架用途：
React主要用于构建UI。
你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

框架特点：

1.声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件
2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。使用虚拟DOM+diff算法，尽量减少与真实DOM的交互
4.灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。
使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。
单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。

React虚拟DOM

React框架的核心优势之一，就是支持创建虚拟DOM来提高页面性能。

虚拟DOM 是相对于实际DOM而言的。

设计人员在设计传统HTML网页的UI时，都会在页面中定义若干的DOM元素，这些DOM元素是所谓的实际DOM。通常，页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上，都是需要通过操作实际DOM来实现的。

对于复杂的页面UI而言，往往会定义大量的实际DOM。频繁地操作大量实际DOM，往往会带来访问性能的严重下降，用户体验也会随之变差，这些都是设计人员所不希望看到的。

因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。 React
DOM类似于一种将相关的实际DOM组合在一起的集合，
是有区别于传统概念上的DOM元素的，如果将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为虚拟DOM

React的渲染机制

React框架之所以大受欢迎，其特有的渲染机制是非常重要的因素之一。既然提到React 渲染机制，那么就说一说Diff算法，该算法是支撑React渲染机制的核心技术之一。
Diff算法博大精深、涉及的知识点很多，建议感兴趣的人找专业的算法书籍作深入学习。Diff算法的核心就是通过比较找到DOM Tree前后的差异。React渲染机制的基本原理就是：在DOM Tree的状态和属性发生改变后，构造出新的虚拟DOM Tree。
然后通过Diff算法与原始的虚拟DOM Tree进行比较，计算出变化的节点并进行更新操作。该算法的优势就是减少了对DOM的频繁重复操作，从而提升页面的访问性能。

React的基本使用方式

1、导入相关js库：

react.js：React的核心库
react-dom.js：提供DOM操作的扩展库
babel.min.js：解析代码转换为JS代码的库

2、创建DOM

3、进行DOM的渲染：ReactDOM.render(element,container[,callback])

element参数：必须，表示渲染的源对象(元素或组件)
container参数：必须，表示渲染的目标对象(元素或组件)
callback参数：可选，用于定义回调函数

eg：传统的实际DOM操作：

<div id="div"></div>

<script type="text/javascript">
    //走位到div
    var div = document.getElementById('div');

    //创建span标签
    const span = document.createElement('span');
    //创建h3标签
    const h3 = document.createElement('h3');
    h3.innerHTML = 'JavaScript DOM';
    //创建p标签
    const p = document.createElement('p');
    p.innerHTML = "Create dom by javascript's createElemnt() "

    //把h3标签添加到span标签中
    span.appendChild(h3);
    //把p标签添加到span中
    span.appendChild(p);

    //把span标签添加到div中
    div.appendChild(span);
</script>

在这里插入图片描述

eg：虚拟DOM操作

<!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>

    <script src="../js/react.development.js"></script>
    <script src="../js/react.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    
    <div id="div-react"></div>

    <script type="text/babel">
        //定位到div(获取容器对象)
        var divReact = document.getElementById('div-react');
        //创建<h3>节点元素：使用js
        const h3 = React.createElement('h3',{id:'title'},'React DOM');
         //创建<p>节点元素：使用JSX语法
        const p = (
            <p>Create virtual DOM by React's createElemt()</p>
        )
        //创建<span>节点,并把h3和p标签填充进去
        const span = React.createElement('span',{},h3,p);

        ReactDOM.render(span,divReact);
            
    </script>

</body>
</html>