目录
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
的开发模式
![](https://i-blog.csdnimg.cn/blog_migrate/9473b033e0bd44edd2c11d0fde0b7769.png)
用户对视图层
(view)
的操作会交给
controller
,
controller
完成相对应的业务逻辑后会要求
model(
数据层
)
去改变数据,
model
中数据的改变会触发
view(
视图层
)
的更新。是单向的数据
绑定
MVVW
的开发模式
![](https://i-blog.csdnimg.cn/blog_migrate/d056920795635a4b811b332f45d9e2a8.png)
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
![](https://i-blog.csdnimg.cn/blog_migrate/a4515c03ebbb19c1312ce157bdb0dd1c.png)
了解完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
应用程序的所有脚本及配置
出现下图所示证明安装成功:
![](https://i-blog.csdnimg.cn/blog_migrate/1862549d78a0c236423f3f2a24af6afd.png)
3.
进入到项目目录
cd
myapp
4.
启动项目
npm start
2.
生成的项目目录结构介绍
![](https://i-blog.csdnimg.cn/blog_migrate/d6a1469a8fdbdb8f7c99999bb63cf945.png)
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中的语法,欢迎大家持续关注!!!