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>

1.3 第一个React应用

首先引入库文件：

  <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>

在body标签中编写JavaScript代码：

  <div id="react"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello World</h1>,
            document.getElementById("react")
        )
    </script>

1.5 ReactDOM.render()方法

render函数：渲染函数，将react的虚拟DOM元素渲染到页面中 container参数：必须，表示渲染的目标对象 callback参数：可选，用于定义回调函数

1.4 React的Diff算法

Diff算法的核心就是扫描DOM树，通过扫描找到DOM树前后的差异。若DOM树的状态或属性发生改变，React会构建新的DOM树，将新的DOM树和原来的DOM树进行比较，找到树中变化的部分进行修改。好处是避免重复的频繁的操作DOM，提高页面的访问性能。 

1.5 React优势

声明式设计：React 采用声明范式，可以轻松描述应用。 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活：React可以与已知的库或框架很好地配合。 使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。 组件复用：通过React构建组件使得代码易于复用，可在大型项目应用开发中发挥优势。 单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。