了解react，这一文足够了！！！

目录

认识React

.React的起源与发展

React的设计理念

React与MVC的关系

React操作虚拟dom

安装react脚手架

react项目目录介绍

我们都知道vue、react、Augular目前是市场上最流行的三种web前端框架，统称为“前端三巨头”！！

首先咱们来了解一下什么是react？

认识React

.React的起源与发展

React 是用于构建 用户界面 的 JavaScript 库，起源于 Facebook 的内部项目，该公司对市场上所有

JavaScript MVC 框架都不满意，决定自行开发一套，用于架设 Instagram 的网站。于 2013 年 5 月开源。

首先说react之前咱们先引入一个概念，我们都知道现在MVC和MVVM是两种不同的软件架构模式。

MVC 的开发模式

用户对视图层 (view) 的操作会交给 controller ， controller 完成相对应的业务逻辑后会要求

model( 数据层 ) 去改变数据， model 中数据的改变会触发 view( 视图层 ) 的更新。是单向的数据

绑定

MVVW 的开发模式

view( 视图层 ) 和 model( 数据层 ) 之间并不会建立任何联系， viewModel 是建立两者之间联系的

桥梁。

View 与 ViewModel 之间通过双向绑定建立联系，这样当 View （视图层）变化时，会自动更新

到 ViewModel （视图模型），反之亦然

vm 的理解： 视图模型层。 Model 层中的数据往往是不能直接跟 View 中的控件一一对应上的，

所以，需要再定义一个数据对象 ( 虚拟 DOM) 专门对应 view( 真实 DOM) 上的控件。而

ViewModel 的职责就是把 model 对象封装成可以显示和接受输入的界面数据对象

MVVM 和 MVC 的区别

1. MVVM 实现了 view( 视图层 ) 和 model( 数据层 ) 之间的双向绑定，而 MVC 只实现了

model( 数据层 ) 和 view( 视图层 ) 之间的单向绑定。即当 model 中的数据发生改变时

view( 视图 ) 会更新，但是 view( 视图 ) 改变时 model( 数据 ) 不会更新。

2. MVVM 中实现了将 model( 数据层 ) 中的数据对象转成 view( 视图层 ) 中的真实 DOM 的封

装，可以以最小的代价实现对 dom 的操作，而 MVC 中并没有做这样的处理。因此需要频

繁的操作 DOM ，降低了页面性能，用户体验差。

React的设计理念

React 并不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V （ View ），甚至 React 并不非

常认可 MVC 开发模式

专注视图层。专注于提供清晰、简洁的 View （视图）层解决方案的同时又包括 View 和

Controller

极简的 API 。只提供组件化相关的非常少量的 API ，尽可能地让用户使用原生 JavaScript 进行

开发

将一个复杂的 UI 界面看成是由许多的独立小块组合而成的。每一个独立的小块被称为组件

React 的特性

1. 声明式设计： React 采用声明范式，可以轻松描述应用。

2. 高效： React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。

3. 灵活： React 可以与已知的库或框架很好地配合。

4. JSX ： JSX 是 JavaScript 语法的扩展。 React 开发不一定使用 JSX ，但官方文档中建议使用

它。

5. 组件：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6. 单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传

统数据绑定更简单

---

                                                

虚拟 DOM

DOM 操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是 DOM 操作，而且这部

分代码会让整体项目的代码变得难以维护。 React 把真实 DOM 树转换成 JavaScript 对象

树，也就是 Virtual DOM

了解完react是什么了，接下来我们来说一下如何在代码中使用react

在这里我直接说安装react脚手架

1. 官方脚手架 create-react-app 安装

1. 全局安装 create - react - app

npm i -g create-react-app

2. 创建项目

create-react-app 项目名称

如果不想全局安装，可以直接使用 npx

npx create-react-app myapp # 也可以实现相同的效果

注：这个过程会安装四个东西

cra-template ：为 create-react-app 提供默认模板

react: react 的顶级库

react-dom: 因为 react 有很多的运行环境，比如 app 端的 react-native, 我们要在 web 上

运行就使用 react-dom

react-scripts: 包含运行和打包 react 应用程序的所有脚本及配置

出现下图所示证明安装成功：

3. 进入到项目目录

cd myapp

4. 启动项目

npm start

2. 生成的项目目录结构介绍

3. 安装失败的解决办法

切换为 npm 镜像为淘宝镜像

使用 yarn ，如果本来使用 yarn 还要失败，还得把 yarn 的源切换到国内

如果还没有办法解决，请删除 node_modules 及 package-lock.json 然后重新执行 npm i 命令

再不能解决就删除 node_modules 及 package-lock.json 的同时清除 npm 缓存 npm cache clean --

force 之后再执行 npm i 命令

4. 入口文件 index.js 介绍

// 从 react 包中引入 React, 要使用 react 就必须进入 React 包，只有引入了这个包我们写的 JSX 语法

(React 特有语法 ) 才会被识别

import React from 'react' ;

// 将我们自己写的 React 组件渲染到页面上。只有引入了这个包才可以将 react 中的虚拟 DOM 转成真实 DOM 树

import ReactDOM from 'react-dom/client' ;

// pwa 渐进式开发的相关的包。和 react 本身没有什么关系。可以不引入

import reportWebVitals from './reportWebVitals' ;

// 指定了将我们的 react 组件渲染到哪里

const root = ReactDOM . createRoot ( document . getElementById ( 'root' ));

root . render (

<React.StrictMode>

{ /* 这种直接在 js 文件中写 html 标签的语法叫做 JSX 语法。是 react 特有语法 */ }

<h1> 欢迎学习 React ！！！ </h1>

</React.StrictMode>

);

// pwa 相关的

reportWebVitals ();

注意： <React.StrictMode> 代表的是使用 严格模式 渲染组件。在严格模式下可以帮助我们：

识别不安全的生命周期

关于使用过时字符串 ref API 的警告

检测意外的副作用

检测过时的 context API

这就是咱们今天介绍的react基本内容，下期我会详细说说react中的语法，欢迎大家持续关注！！！