初识React及React开发依赖介绍

亦凉 2023-10-02 20:48 41阅读 0赞

#### 文章目录 ####

*   *  初识React
     *   *  React介绍
         *  React特点
     *  React的依赖介绍
     *   *  React的开发依赖
         *  Babel和React的关系
         *  React的依赖引入

### 初识React ###

#### React介绍 ####

**React是什么呢?**

> 相信每个做开发的人对它都或多或少有一些印象;
> 
> 这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库;

**目前对于前端开发来说，几乎很少直接使用原生的JavaScript来开发应用程序，而是选择一个JavaScript库(框架)**。

> 在过去的很长时间内，jQuery是被使用最多的JavaScript库;
> 
> 在过去的一份调查中显示，全球前10,000个访问最高的网站中，有65%使用了jQuery，是当时最受欢迎的JavaScript库;
> 
> 但是，目前甚至已经处于淘汰的边缘了;

**而无论是国内外，最流行的其实是三大框架:`Vue、React、Angular`**。

--------------------

**React由Facebook来更新和维护，它是大量优秀程序员的思想结晶**:

> React的流行不仅仅局限于普通开发工程师对它的认可;
> 
> 大量流行的其他框架借鉴React的思想;

**Vue.js框架设计之初，有很多的灵感来自Angular和React**。

> 包括Vue3很多新的特性，也是借鉴和学习了React;
> 
> 比如React Hooks是开创性的新功能(也是我们课程的重点);
> 
> Vue Composition API学习了React Hooks的思想;

**Flutter的很多灵感都来自React，来自官网的一段话:(SwiftUI呢)**

> 事实上Flutter中的Widget – Element – RenderObject;
> 
> 对应React的就是JSX – 虚拟DOM – 真实DOM;

**所以React可以说是`前端的先驱者`，它总是会引领整个前端的潮流。**

> React:用于构建用户界面的 JavaScript 库;
> 
> React的官网文档:https://zh-hans.reactjs.org/

![在这里插入图片描述][275f7a6ad5884c898f1c613d96256547.png_pic_center]

#### React特点 ####

**声明式编程**

> 声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、SwiftUI;
> 
> 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面;

**组件化开发**:

> 组件化开发页面目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件;
> 
> 如何合理的进行组件的划分和设计也是后面我会讲到的一个重点;

**多平台适配**

> 2013年，React发布之初主要是开发Web页面;
> 
> 2015年，Facebook推出了ReactNative，用于开发移动端跨平台;(虽然目前Flutter非常火爆，但是还是有很多公司在使用 ReactNative);
> 
> 2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序;(VR也会是一个火爆的应用场景);

### React的依赖介绍 ###

#### React的开发依赖 ####

**开发React必须`依赖三个库`**:

> react:包含react所必须的核心代码
> 
> react-dom:react渲染在不同平台所需要的核心代码
> 
> babel:将jsx转换成React代码的工具, jsx语法浏览器是不识别的

**第一次接触React会被它繁琐的依赖搞蒙，居然依赖这么多东西: (直接放弃?)**

> 对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个包。
> 
> 其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;
> 
> 在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里;

**为什么要进行拆分呢?原因就是推出react-native**

> react包中包含了react web和react-native所共同拥有的核心代码。
> 
> react-dom针对web和native所完成的事情不同:
> 
>  *  web端:react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
>  *  native端:react-dom会将jsx最终渲染成原生的控件(比如Android中的Button，iOS中的UIButton)。

#### Babel和React的关系 ####

**babel是什么呢?**

> Babel ，又名 Babel.js。
> 
> 是目前前端使用非常广泛的编译器、转移器。
> 
> 比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们**开发时**希望使用它。
> 
> 那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。

**React和Babel的关系**:

> 默认情况下开发React其实可以不使用babel。
> 
> 但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
> 
> 那么我们就可以直接编写jsx(JavaScript XML)的语法，并且让babel帮助我们转换成React.createElement。
> 
> 后续文章还会详细讲到;

#### React的依赖引入 ####

**所以，我们在编写React代码时，这三个依赖都是必不可少的**。

**那么，如何添加这三个依赖**:

> 方式一:直接CDN引入
> 
> 方式二:下载后，添加本地依赖
> 
> 方式三:通过npm管理(后续脚手架再使用)

**暂时我们直接通过CDN引入，来演练下面的示例程序**:

> 这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息

[275f7a6ad5884c898f1c613d96256547.png_pic_center]: https://img-blog.csdnimg.cn/275f7a6ad5884c898f1c613d96256547.png#pic_center