八股文

React

Fiber

以前react的DOM数是一个大任务，会阻塞进程，出了fiber之后，就被拆成了异步执行的小任务，在dom中执行，每次执行完小任务，看有没有优先级更高的

生命周期

  • 挂载

  • 更新

  • 卸载

类组件有显示的生命周期

函数组件有显示的生命周期

hook

  • useref：可变值不造成重新渲染

  • Usestate：管理一种状态，简单变量

  • useReducer：管理状态，函数更新

  • uselayouteffect：浏览器渲染前执行

  • Useeffect：浏览器渲染后执行

  • Usememo：缓存数据

  • Usefunction：缓存函数

上下文传递

创建一个上下文对象，用上下文组件包裹需要接收的组件，接收值

diff

类似于一个嵌套字典，每个节点都有key,每次触发更新了，就会看新旧节点的key更新不一样的地方，增加或删除增增加的key或者是减少的key

函数

  • 纯函数:相同输入相同输出

  • 箭头函数：简洁,没有this，prototype （原型，可以共享方法，和向上查找上级对象的共享方法）,arguments（接收未定义的传递值）

  • 普通函数

  • 闭包：函数内部引用了外部变量

”…”在react的用处

展开数组和字典之类的

什么是react

  • 组件化

  • 虚拟dom

  • 单向数据流：向子组件传递数据只能自上而下，不能反着修改数据，可以保证数据流的清晰

  • jsx写法

类组件和函数组件的区别

类组件：需要集成react的父类，手动调用render渲染

函数组件：直接用函数写

Javascript

事件循环

同步代码 > 微任务（加急） > 宏任务（异步数组）

前端请求方式

  • axios：第三方库，自动序列化，错误处理

  • fetch：原生自带

异步发展

版本控制

请求类型

常规HTTP请求

轮询：需要不断建立新的连接并销毁服务器，压力大，实时性较低

sse：基于http协议标准请求类型，只需要建立一次连接，服务器到客户端单向通道，浏览器会自动管理状态

websocket：WS协议，原生需要手动管理状态

webpack

构建，打包，分割，压缩

Vite

开箱即用的脚手架，高效热加载和构建

Threejs

3d库

创建场景->创建相机->创建渲染器->创建几何体_使用材质或使用外部模型->将模型添加到场景中->设计模型动画

ECharts

数据可视化库

初始化->创建一个option对象->渲染

swup

监听站内跳转，拉取目标HTML，解析出规则配置需要替换的容器,通过实现局部跳转和动画

esm和commonjs

都是模块化系统

  • esm：编译时确定

  • commonjs:运行时确实

Dom

  • 真实：由浏览器维护的一个文档对象，由于渲染引擎所以更新代价高，document对象

  • 虚拟：由内存维护的一个js对象

  • bom：浏览器操作,window对象

mvvm

数据变化自动更新ui

react

state更新 -> 虚拟dom diff 对 ->局部更新

包管理器

  • npm：扁平化的 node_modules

  • pnpm：全局储存，其他项目通过硬链接，只链接显示声明的直接依赖，避免幽灵依赖

  • bun：类似于PNPM，增加了缓存字节码依赖库文件

渲染方式

CSR 客户端渲染：返回一个HTML空壳加js，在客户端生成dom

SSR 服务端渲染：在服务器上构建渲染好了html，返回客户端，在客户端进行水合（html匹配+事件监听+客户端需要执行的js代码）

SSG：在构建的时候生成静态的HTML文件

CSS

Tailwind CSS

定义了很多原始类方便快速开发

响应式布局

媒体查询器可以实现不同的布局

类选择器可以实现不同配色

计算机基础概念

异步和多线程

异步：先执行后面的任务

多线程：多个线程同时进行

并发和并行

并发：任务切片交替执行

并行：任务同时执行

函数式编程和命令式编程

函数式编程是组合，不同功能的函数为主，命令式编程是写清楚流程为主

垃圾回收机制

  • 引用计数：给每一个对象都分配一个计数，到零就回收

  • GC：就是从根集（栈，堆，寄存器）出现标记存活对象，回收不可达对象

组件化

拆分为可复用对象

序列化和反序列化

数组，字典等和Json，套接字等转换

微服务

就是无状态的单服务，不会让局部影响全局

消息队列

分为生产者 队列 消费者

Socket

实现tcp和udp较为底层的编程方式

Nginx

反向代理：配置好了自动转发网络请求

正向代理：要指定转发后的目标

  • 负载均衡：

    upstream（后端服务组）

    • 自动负载均衡：自动去探测
    • 被动负载均衡：根据实际链接错误数量

网关

Docker

容器管理

  • docker compose：多个容器编排

  • dockerfile：定义怎么构建容器

蓝绿发布

  • 部署双服务，新服没问题的时候通过nginx和dns切换

BFF层

为不同的前端层适配具体的后端

Git

版本控制

分布式管理：多人修改智能合并检测冲突

去中心：每个电脑都有存档

ci/cd

自动构建/部署

RPC

http协议，实现的远程调用函数协议，强调函数

cros

  • 同源

  • 开发代理

  • 后端代理

计算机性能优化

  • 微服务架构：所有前端页面设计为无状态服务，部署在多台服务器上

  • 数据分库

  • 读写分离：设计数据库多重架构

  • 热点缓存：利用Redis这种将热点数据缓存到内容中实现快速读写，cdn缓存

  • 消息队列

  • 事件驱动：类似于钩子

  • 异步+等待动画

  • dns负载均衡

  • 流量转发

  • nginx负载均衡

Restful api

http协议，利用请求协议和状态码表达语义，强调资料

TCP

syn丢失

服务端没响应或丢失syn，客户端会重发

高并发下会导致雪崩效应

Nodejs

中间件的原理是什么

洋葱模型，可以利用next语法提前执行后面的中间件

Nextjs

文件路由机制

  • App Router：新

  • Pages Router ：旧

sql

索引

数据库类型

事务

什么是

四大特性

隔离级别

优化

hash和b+树的区别

子查询

连接

Redis

传统数据都是储存在硬盘中的，所以速度处理较慢，Redis是储存在内存中的，所以说读写速度快，可以同时处理更多的数据，它也提供了快照和追加日志两种持续性机制

缓存雪崩：加随机tts，避免大量缓存同时失效

一致性：用缓存肯定要接受一部分的误差，用TTS可以保证一个合理的误差

Supabase

提供了数据库和边缘函数，通过rls实现行级安全策略，每次访问数据时，会自动校验身份信息（JWT），Supabase会将校验好的用户身份传递给postgresql，（RLS）权限校验，在数据库层面校验某个用户可以对哪些数据进行哪些操作

rust

堆栈

栈：后进先出，所有数据都有固定大小和固定,编译器自动管理

堆：在堆区找到一块区域，把它标记为已使用，并返回该区域地址,需要手动管理

数据类型

  • 数字

  • 字符和字符串

  • 布尔

  • 占位符()

  • 数组类型

|类型|可变长度|同一类型|

|array|否|是| |vec|是|是|

|Tuple|否|是|

  • kv类型

    • hashmap

  • 函数

  • 结构体

  • 枚举

  • 迭代器：有点像数组，链式组合只能一个一个取出来

  • 泛型：其他任意的一种数据类型，在rust中可以施加约束

特征

鸭子接口的感觉

Trait：可以定义它有什么特征，比如定义生物会呼吸 impl：实现具体特征，比如一些是靠的肺，一些是靠的腮，一些是靠的皮肤

孤儿规则不能为外部的库实现特征

不过可以用一个结构体包装，绕过这个规则

生命周期

类似于作用域，决定了他活多久，不标注可以默认推断，也可以通过标注显示告诉编译器不同引用的约

所有权

  • 一个变量（堆数据）只有一个所有者

  • 离开了作用域，就会被丢弃

借用

变量默认不可变

  • 可变引用：只能一个，可以修改

  • 不可变引用：可以多个只读

模式匹配

  • If-else

  • match

错误处理

  • panic：直接终结整个程序

  • option：这个数据结构只会返回数据或空

  • result：这个数据结构返回正确或错误

智能指针

  • Box：Rust流行的智能指针可以分配堆对象

  • Rc，Arc：两者都是实现引用技术，后者具有原子性

  • cell，Recell:两者都是可以在编译时期让数据可变，前者只能用于栈的简单变量，后者一般用于堆的复杂变量

其他

  • 变量解构：可以把数组，字典这种类型的变量一个表达式赋值到多个变量

  • 变量遮蔽：后面的变量会把前面相同的变量名覆盖

  • 忽略变量：前面加一个短横线代表不使用

Agent应用

Transformer

分词：根据词典

权重：

训练学习出来的

一开始随机数

反向传播：计算本次要变化的方向（类似于多了就减少，少了就增多）

梯度下降：应用反向传播的计算的的方向

每个词和另外的词有多种权重

graph LR
    A[分词] --> B[词嵌入
  每个词的向量]
    B --> C[位置编码
  调整向量，类似于增加点随机数]
    C --> D[多头注意力]
    subgraph D [多头注意力]
        D1[将分词按照多种关系
  权重多次分别计算]
    end
    D --> E[残差+归一化<
  把前面的多种权重结果
    按照算法修正为一个]
    E --> F[前馈网络
  升维降维，类似于
    中译英译中]
    F --> G[输出]
graph LR
    A[分词] --> B[词嵌入
  每个词的向量]
    B --> C[位置编码
  调整向量，类似于增加点随机数]
    C --> D[多头注意力]
    subgraph D [多头注意力盒子]
        D1[将分词按照多种关系
  权重多次分别计算]
    end
    D --> E[残差+归一化
  把前面的多种权重结果
    按照算法修正为一个]
    E --> F[前馈网络
  升维降维
  类似于中译英译中]
    F --> G[输出]

rag

加上外部知识库先检索

ReAct 模式

思考+行动交替执行

Function Calling / Tool Use

工具函数不同平台名称不同

MCP

一套ai上下文协议

Embedding

将数据向量的过程

skill

提示词+可选脚本

workflow

有点像命令式编程，定义了一套工作流程

Linux

包管理器

如何检测网络问题

查看现在带宽使用情况

cpu使用情况

dns配置