React 实践

# React 实践

# 笔记

# mono 的含义

Monorepo 最早的出处是软件开发的一个策略， mono 表示单一， repo 表示 repository 意思是多个项目共用一个代码库来管理依赖关系。-- 同一套配置文件，统一构建部署流程等等。

# mono 的优势

更好的代码复用。
1. A项目 B项目 C项目 common
整体的构建，测试逻辑的统一，方便协作。

# 架构

分层
复用
目标 - 隔离熵。

微前端是不是架构？是
隔离熵。（熵，代表着一个混乱程度）
管理，是隔离人的熵，架构，是隔离代码的熵。

架构 - 隔离熵。熵 -- 一个系统的混乱程度。不混乱。

# 构建方案

# bundled

[module]

一般就是指一个模块，一般从构建的角度来，一个文件就是一个 module

[chunk]

一般一个“构建流程”，在静态分析的过程中，从入口那一个依赖树，就是一个 chunk import(); -> split chunk

[bundle]

一般是指产物，main.xxx.js -> 是把你所有的文件合并在一起的，形成了 bundle

[channel]

一般和 uri 是挂接的，代表唯一地址

典型：webpack, rollup

# bundleless

gulp, ts,

# css 的方案

# css in js

emotion

import { css, cx } from 'emotion';
const app = css`
  background-color: blue
`
return (
  <div classname=cx(app)></div>
)

styled-component

# css module

Q: 怎么做css模块化规范的？

基于什么样的背景; 选项 -- 哪些; 为什么选择了这个

# utility-css

tailwindcss (opens new window)

原子化css~

windicss

Q；在 tailwindcss 和 windicss 中，我们选择了 tailwind 而不是 windi.

windi 过于灵活，难以构建有效地标准。

headlessui (opens new window)

提供布局，样式自己写

# webpack

Q: webpack怎么做代码分割？

通过缓存组，可以做一些公共代码的合并，分割

# webpack 插件

webpack 本身有一系列的生命周期，我通过plugin的形式，在某个生命周期里，调用一些方法。 seal, afterEmit emit, compile

webpack插件本质上解决的是工程问题，babel插件解决的是词法问题。

function Core() {
    this.compileHooks = [];
    this.sealHooks = [];
    this.emitHooks = [];
    this.options = {};
}
Core.prototype.run = function() {
    this.compileHooks.reduce((total, fn) => {
        fn(total, options);
    });
    // ....
    this.sealHooks.reduce((total, fn) => {
        fn(total, options);
    });
    // ...
}
Core.prototype.addPlugin = function(type, fn) {
    this[type].push(fn)
}

如压缩，md转换等

# babel插件

如：给调试添加行列信息，重写console~

# postcss插件

比较小众

如：将主题的颜色配置与项目分离，构建主题颜色设置的 DSL，色卡交给UI同学进行维护。满足颜色主题的标准化。

# Node

一般很少用node来写后端，单线程，并发不好

QPS：Queries Per Second，顾名思义：“每秒查询率”，是一台服务器每秒能够相应的查询次数，是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准。

TPS：是TransactionsPerSecond的缩写，也就是事务数/秒。它是软件测试结果的测量单位。一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。客户机在发送请求时开始计时，收到服务器响应后结束计时，以此来计算使用的时间和完成的事务个数。

单核的CPU只能处理一个线程

后端考虑：扩容，多加几个服务器

前端考虑：在并发情况下，保证我的界面加载性能更好

# 鉴权

JWT 鉴权：本质上是一个标准，由三段 base64 组成

header: {alg: "HS256", tye: "JWT"}
payload: 负载，载体

{username: 'test'}

一般情况下，不放置密码

signature: 基于这两段，进行一个二次加密，加盐

oauth 2.0

# 组件库打包

构建：
- 你的公共组件库，是怎么打包的，是怎么用的，是怎么团队配合的。
功能：
- react, antd, vue, element.
- peerDep,
  - src

# 埋点与监控

接口时序问题：按钮在数据渲染完成前就展示出来；小概率
业务分析
性能需求

# 代码埋点

代码埋点最常用，最耗时，最灵活的一种方式。

上报什么信息？

埋点的标志信息，如eventID, eventType
业务自定义信息，比如教育行业，用户年级、教育水平等；
通用设备信息，如：userId，userAgent，diviceId...

怎么上报？

实时上报：业务方调用api后，立即发送上报请求；
延时上报：sdk内部收集上报信息，在浏览器空闲时，统一上报；

# 无埋点

不是没有埋点，不是不需要研发手动添加

一般会有一个sdk封装好了各种逻辑，业务方直接引用即可~

sdk一般是监听页面所有事件，上报所有点击事件以及元素，然后通过后台分析；

诸葛IO, 神策

# 实现

在事件捕获阶段执行

// 要监听所有元素，应在捕获阶段执行
window.addEventListener('click', (event) => {
    let e = window.event || event;
    let target = e.scrElement || e.target;
    console.log('====target', target);
})


// getXpath

埋点：是DA同学的需求 data analysics
错误监控：是RD的需求 reasearch & development
性能：PM, RD的需求

# 前端知识体系

用户交互 -》事件，响应函数 -》数据改变 -》发布订阅的逻辑 / reRender -》diff到底发生了什么变化 -》UI变化

浏览器到底在干什么？
宿主环境是什么？ node/browser
构建工具在干什么？

# 备注

IntersectionObserver
useEffect
Proxy封装本地缓存库
编写一个简单的webpack插件：zip压缩、md转换。。。
编写一个babel插件：给console添加行列信息。。。
编写postcss插件：主题切换、语言切换
整理下 teach-react-mono 项目涉及的知识内容

上次更新: 9/11/2023, 8:02:22 PM