7-8月份面试经验起步软件 react18新特性 useCallbask和useMemo的区别 hooks有什么好处 r

起步软件

react18新特性

useCallbask和useMemo的区别

hooks有什么好处

react fiber

Fiber是什么？

react的基本组成：将JSX转为元素的对象结构

为了将这个元素渲染到DOM上，react内部会创建一种内部实例来追踪该组件的所有信息和状态。在Fiber架构中这个内部实例就叫做Fiber

Fiber是一个JS对象，代表React的一个工作单元，它包含了与组件相关的信息。

为什么需要Fiber?

在16之前，使用递归处理组件树更新。所以

1. React 18 新特性

并发渲染（Concurrent Rendering） 核心特性，允许 React 中断渲染过程处理高优先级任务（如用户输入），提升响应速度。
自动批处理（Automatic Batching） 将多个状态更新合并为单个渲染，减少不必要的重复渲染（包括异步操作）。
新 API
- createRoot：替换 ReactDOM.render，启用并发模式
- startTransition：标记非紧急更新（如搜索过滤）
- useDeferredValue：延迟更新部分 UI
- Suspense 增强：支持服务端流式渲染
服务端渲染优化 支持 Suspense + 流式 HTML 传输，加速首屏加载。

2. `useCallback` vs `useMemo`

特性	`useCallback`	`useMemo`
返回值	记忆化函数	记忆化值
使用场景	防止子组件不必要重渲染	避免重复计算复杂逻辑
依赖项	依赖变化时重新创建函数	依赖变化时重新计算值
示例	`const fn = useCallback(() => {}, [dep])`	`const val = useMemo(() => heavyCalc(), [dep])`

3. Hooks 的好处

逻辑复用 自定义 Hook（如 useFetch）替代 HOC/render props，避免嵌套地狱。
代码组织 将相关逻辑（状态 + 副作用）聚合在同一个 Hook，告别生命周期方法分散。
简化组件 函数组件 + Hooks 替代 class，消除 this 问题，代码更简洁。
性能优化useMemo/useCallback 减少无效计算和渲染。
学习成本低 更少的概念（无生命周期方法）。

4. React Fiber

前端 - 万字长文介绍React Fiber架构的原理和工作模式 - J实验室 - SegmentFault 思否

传统的是深度优先递归组件树

缺点：同步、不可中断阻塞线程

fiber为了解决这个问题：

fiber节点
- 将jsx组件转为一个个js对象，保存着组件的属性
增量更新将渲染工作分解成fiber节点，而不是一次性遍历树结构
链表结构，可中断、可恢复一个帧的时间内没有完成节点，立即中断交给主线程。如果还有时间，就继续处理下一个fiber节点。是通过调度器调用requestIdreCallback来处理的，会查看浏览器什么时候空闲，根据任务的优先级来处理
浏览器的渲染过程
1. 域名解析浏览器缓存-》系统缓存-》都没有就像DNS服务器发请求，解析出对应的IP
2. 客户端发送http请求建立TCP三次握手如果是Https就还有TSL层的握手
  1. 客户端发送请求携带自己支持的TLS版本号
  2. 服务端响应确认TLS版本号和随机数并附上证书
  3. 客户端验证证书
    1. 申请安全证书的流程
      1. 服务器生成公钥和私钥，把公钥和信息发送给数字认证机构
      2. 数字认证机验证信息，如果没错，就用自己的公钥签名，并颁发证书
      3. 所有的浏览器都有所有数字认证机构的公钥，要验证服务器身份的时候，就用公钥解密证书
  4. 双方协商加密的算法
  5. 加密通道建立
3. 然后服务端返回html文件
4. 浏览器接受到文件之后就可以做渲染
  1. 遍历html，生成DOM树
  2. 生成css树
  3. 合并
  4. 布局，计算每个元素的位置
  5. 绘制

5. 为什么需要虚拟 DOM (VDOM)?

性能优化
- 直接操作 DOM 昂贵（重排/重绘）
- VDOM 通过 Diff 算法 计算最小变更，批量更新真实 DOM。
声明式编程 开发者描述 "UI 应该是什么状态"（而非一步步操作 DOM）。
跨平台能力 VDOM 抽象层使 React Native/SSR 成为可能。
开发体验 自动处理 DOM 更新，代码更专注业务逻辑。

6. CSS 文本截断方案

单行截断

.truncate {
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 隐藏溢出 */
  text-overflow: ellipsis;  /* 显示省略号 */
  width: 200px;            /* 需固定宽度 */
}

多行截断（如 3 行）

.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;    /* 限制行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

注意：-webkit-line-clamp 非标准属性，但现代浏览器均支持

使用 `clamp()` 的响应式截断

.responsive-truncate {
  font-size: clamp(1rem, 2vw, 1.5rem); /* 动态调整字号 */
  /* 配合单行/多行截断使用 */
}

react为什么要做虚拟dom

css属性怎么做截断

Bitget Wallet

挑项目中的一个难点来讲

这个表格的数据是动态组合成的那你是怎么处理很长数据的优化的

图片用base64 具体的函数实现是

react18和vue3的区别

核心范式差异 react 在变量更新的时候，会重新渲染整棵树，然后虚拟DOM对比，做更新。vue在变量更新的时候，是通过proxy精准更新涉及到的组件。
API风格：react hook是函数式的 vue3是组合式的API（函数式+组合式）
模板：react是jsx vue是SFC单文件组件模板
react侧重并发性和响应速度

react18是一个大的版本变动，那和之前的区别在哪里：fiber架构是15的 fiber使用了链表的结构，那为什么使用了链表的结构就可以随时中断和恢复呢？对照着实际的代码来

Next.js中 next15、16的版本中的page router和app router的区别

特性	Page Router (`pages`)	App Router (`app`)
路由定义	文件路径即路由 (`pages/about.js`)	文件夹路径 + 特殊文件 (`app/about/page.js`)
数据获取	`getStaticProps`, `getServerSideProps`	服务端组件中直接 `async/await`
布局	`_app.js` (全局)，嵌套布局较麻烦	嵌套布局是核心 (`layout.js` 自动嵌套)
组件模型	默认所有组件是客户端组件	默认服务端组件 (RSC) ，按需使用 `'use client'`
流式渲染	支持有限	深度集成 Suspense (`loading.js`)
错误处理	需手动 `ErrorBoundary`	内置错误边界 (`error.js`)
元数据	`next/head` 或 `getStaticProps` 返回 `props`	专用 Metadata API

SSR和SSG 什么情况下会使用SSR 什么情况下使用SSG

next.js中 Image标签和 img标签的区别性能优化图片大小的问题

Image可以将

自动将图片转为webP格式
自动压缩图片
大幅减少图像文件大小，提升加载速度
响应式图像浏览器会自动根据设备屏幕尺寸和密度自动下载最合适尺寸的图像

字节外包

讲项目

增量静态生成的和服务端渲染区别,你使用了长连接吗

手写Promise.all

浏览器输入URL之后有什么反应

首屏出现白屏会怎么排查

讲一下js中的事件队列

有写过后端吗?

为什么要离职

怎么学习前端的

AI Agent初创公司

聊一下你的项目

SEO是什么

响应式

除了用reduxtool kit\zustand还用了哪些状态管理

很抓话头怎么用原生的image实现Next的image组件主要是做错误处理用fallback

对你的sideProject感兴趣

为什么选乾坤我有调研但是我忘记了(想哭)遇到的难点和复杂的点是什么

手写useSWR

香港crypto

给定一个项目,要做重构,你会怎么去做前端的技术选型

重构会用什么怎么考虑要看框架和版本 18有点老旧。然后再考虑能不能用hook

nextjs的好处是什么？

for 循环 map和foreach的区别使用哪些加密的算法？在技术栈选型的时候要考虑缺点避免delay

erc20的方法有哪些钱包连接是怎么实现的

品阔

聊一下你的项目 (你负责的业务、难点)

js中处理单位的显示

钱包连接的思路

读取和显示余额

实现一个倒计时功能的时候要考虑哪些边界条件

Bybit一面

css的样式选择器的优先级类和属性是同级的那

useState和useEffect的区别

useRef和useState 的区别如果是变量数据类型的话会怎么操作

useRef是同步更新数据,可用于获取DOM元素、获取组件、获取定时器ID、获取

特性	`useState`	`useRef`
主要目的	管理组件状态	访问 DOM/存储可变引用
触发渲染	✅ 是	❌ 否
返回值	`[state, setter]`	`{ current: value }`
更新方式	异步 (批量更新)	同步 (立即更新)
数据持久性	跨渲染周期	跨渲染周期
适用场景	UI 状态、表单数据	DOM 操作、计时器、实例变量
是否响应式	✅ 是	❌ 否

经验法则：

当数据变化需要更新 UI 时，使用 useState
当需要存储数据但不影响 UI 时，使用 useRef
当需要直接访问 DOM 元素时，使用 useRef

闭包的定义和应用场景

封装私有变量
事件监听
set Timeout和网络请求

useMemo有使用到闭包吗

有因为React底层保存了依赖项变量,然后依赖项变量改变才会调用回调函数.而这个回调函数会捕获当前作用域变量

// React 内部维护的闭包变量
let prevDeps = null;   // 存储上一次的依赖项
let prevValue = null;  // 存储上一次的计算结果

function useMemo(factory, deps) {
  // 1. 检查依赖是否变化
  if (prevDeps === null || !shallowEqual(prevDeps, deps)) {
    // 2. 依赖变化时重新计算
    prevValue = factory(); // 执行闭包函数（捕获当前作用域变量）
    prevDeps = deps;      // 更新闭包保存的依赖项
  }
  
  // 3. 返回缓存值或新计算的值
  return prevValue;
}

== 和 === 有什么区别？

html里面的新标签有哪些语义化的标签有什么作用

www.mianshipai.com/docs/first-…

浏览器从输入URL的整个过程

是怎么做性能优化的

www.mianshipai.com/docs/third-…

www.mianshipai.com/docs/second…

react的通信方式

www.mianshipai.com/docs/second…

事件冒泡

回文字符串的简洁实现

去重的方法

实现回文字符串

实现一个点赞的功能用户可以无限点赞

Bybit二面

性能优化这一块做了哪些

在服务端有多个请求要怎么做优化

图片的 CDN缓存和强制缓存和协商缓存

图片的 CDN缓存为什么可以优化加载速度?

部署的时候是怎么做优化的? 怎么做部署的?

docker部署的那nodejs是单线程的,假如服务器是4核的,要怎么去充分利用这4个核

有用过graphQL吗是在什么情景下使用的

websocket和http的区别

什么时候需要使用useCallback对函数做优化

图片是怎么做优化的

7-8月份面试经验