【React系列四】—React学习历程的分享

前言

根据之前我们所学的基础知识，包括虚拟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分析：

javascript 复制代码

<!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文件，进行配置

javascript 复制代码

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:5000
      changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      changeOrigin默认值为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

javascript 复制代码

import PubSub from 'pubsub-js'

// 订阅消息
var token = PubSub.subscribe('topic', (msg, data) => {
  console.log(msg, data)
})

// 发布消息
PubSub.publish('topic', 'hello react')

// 取消订阅
PubSub.unsubscribe(token)

有不明白的或者有其他问题的可以评论区留言噢

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！