前言
根据之前我们所学的基础知识,包括虚拟DOM和Diff算法的了解,我们也要去接触React的脚手架的概念和React的设计理念是什么?才能更好的掌握这门语言
一、React的设计理念
组件化思维
每个组件都符合开放—封闭原则,封闭是针对渲染工作流来说的,指的是组件内部的状态都由自身维护,只处理内部的渲染逻辑。开放是针对组件通信来说的,指的是不同组件可以通过props(单项数据流)进行数据交互
数据驱动视图
UI=Fn(data)
通过上面这个公式得出,如果要渲染界面,不应该直接操作DOM,而是通过修改数据(state或prop),数据驱动视图更新
虚拟DOM
由浏览器的渲染流水线可知,DOM操作是一个昂贵的操作,很耗性能,因此产生了虚拟DOM。虚拟DOM是对真实DOM的映射,React通过新旧虚拟DOM对比,得到需要更新的部分,实现数据的增量更新
二、React脚手架
用脚手架创建React项目
- 全局安装 React 脚手架:npm i -g create-react-app
- 创建项目:create-react-app 项目名称
- 进入文件夹:cd 项目名称
- 启动项目:npm start
- 详见官方说明(opens new window)
脚手架的静态结构目录
public :静态资源文件
- manifest.json :应用加壳(把网页变成安卓/IOS 软件)的配置文件
- robots.txt :爬虫协议文件
src :源码文件
- App.test.js :用于给 App 组件做测试,一般不用
- index.js :入口文件
- reportWebVitals.js :页面性能分析文件,需要 web-vitals 库支持
- setupTests.js :组件单元测试文件,需要 jest-dom 库支持
- index.html分析:
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!-- %PUBLIC_URL% 代表 public 文件夹的路径 --><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- 开启理想视口,用于做移动端网页的适配 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) --><meta name="theme-color" content="red" /><!-- 网站描述 --><meta name="description" content="Web site created using create-react-app" /><!-- 用于指定网页添加到手机主屏幕后的图标 --><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!-- 应用加壳时的配置文件 --><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title></head><body><!-- 若浏览器不支持 js 则展示标签中的内容 --><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>
脚手架的配置代理
方式一:
在package.json文件中进行配置==>"proxy":"http://localhost:5000"
- 优点:配置简单,前端请求资源可不加前缀
- 缺点:不能配置多个代理
- 工作方式:当请求了3000端口号(本机)不存在的资源时,就会把请求转发给5000端口号服务器去工作
方式二:
在src目录在新建代理配置文件setupProxy.js文件,进行配置
const proxy = require('http-proxy-middleware')module.exports = function (app) {app.use(//api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)proxy('/api1', {//配置转发目标地址(能返回数据的服务器地址)target: 'http://localhost:5000',//控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000changeOrigin默认值为false,但一般将changeOrigin改为true*/changeOrigin: true,//去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)pathRewrite: { '^/api1': '' },}),proxy('/api2', {target: 'http://localhost:5001',changeOrigin: true,pathRewrite: { '^/api2': '' },}))
}
三、React中的发布机制和消息订阅
这是React中兄弟组件或任意组件之间的通信方式
使用的工具库:PubSubJS(opens new window)
下载安装 PubSubJS :npm install pubsub-js --save
import PubSub from 'pubsub-js'// 订阅消息
var token = PubSub.subscribe('topic', (msg, data) => {console.log(msg, data)
})// 发布消息
PubSub.publish('topic', 'hello react')// 取消订阅
PubSub.unsubscribe(token)
有不明白的或者有其他问题的可以评论区留言噢
今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步,成为更好的自己!