网络类问题面试题网络协议从浏览器输入URL后都经历了什么？解析URL，判断是否是合法url格式，如果不是，则将其作

网络类

网络协议

从浏览器输入URL后都经历了什么？

解析URL，判断是否是合法url格式，如果不是，则将其作为关键字进行搜索；
DNS(域名系统)域名解析；
三次握手建立TCP连接；
发送HTTP请求，服务器处理请求，返回响应结果；
四次挥手关闭TCP连接；
浏览器渲染：解析HTML生成DOM树；

webSocket和http区别？

连接方式：

HTTP是一种无状态的协议，每次请求都现需要建立一个新的连接，完成请求后立即关闭连接；
WebSocket是一种实时通信协议，允许客户端和服务器端之间的双向通信，不需要每次都重新建立连接；

数据传输：

HTTP协议是基于请求-响应模式的，客户端发送请求，服务器返回响应；
WebSocket允许服务器主动向客户推送数据，实现了服务器和客户端的实时双向通信；

数据格式

HTTP协议传输数据通常是文本或二进制数据；
WebSocket可以传输任意格式的数据，包括文本，二进制，JSON等；

端口

HTTP协议默认端口80（HTTP）或443（HTTPS）
WebSocket默认端口80（WS）或443（WSS）

相同点：
- 都是基于TCP协议;
- 都是应用层协议。

状态码

2XX（成功）
    200（成功）- 服务器已成功处理了请求；

3XX（重定向）
    301（永久移动）
    302（临时移动）
    304（未修改）

4XX（请求错误）
    400（错误请求）
    401（无权限，未授权）
    403（禁止）-服务器拒绝请求
    404（未找到）

5XX（服务器错误）
    500（服务器内部错误）
    503（服务不可用）

跨域

同源（协议，域名，端口号）

webSocket接受大量数据如何处理？

分批处理

接口正常请求速度很快，刷新页面后接口返回变慢，什么原因？

vue怎么防止被攻击（爬虫）？

React问题

常用的React Hooks?

useState()
useEffect()
useContext()
useReducer()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffect()
useDebugValue()

useEffect和useLayoutEffect 区别?

useEffect:

在组件渲染后执行，且在浏览器绘制后进行。

适合用于处理不影响布局的副作用，比如数据获取、事件监听等。

useLayoutEffect:

在浏览器绘制之前执行。

适合用于需要直接读取 DOM 布局并同步触发重渲染的副作用，比如测量 DOM 元素的尺寸或位置。

区别

特性	useEffect	useLayoutEffect
执行时机	浏览器渲染完成后异步执行	DOM 更新后、浏览器绘制前同步执行
阻塞渲染	不阻塞，用户可立即看到渲染结果	阻塞，需等待副作用执行完毕才渲染
适用场景	数据获取、事件订阅、非视觉操作	同步更新 DOM、测量布局、避免页面闪烁
性能影响	无阻塞，性能更优	同步操作可能阻塞渲染，导致卡顿
服务端渲染	支持	不支持（无 DOM，无实际效果）

state与props区别?

state:是组件的内部状态，通常用于存储组件的私有数据，可能会随着用户操作或其他外部事件改变。state可以通过组件自己的方法更新；

props: 是组件的属性，代表从父组件传递给子组件的数据。

区别：

来源：state是由组件自身管理的，而props是由父组件传递的。
可变性：state是可以变化的，组件可以通过调用setState方法来更新状态；props是不可变的，不能在组件内部修改。
用途：state通常用于表示组件的本地状态，如用户的输入、动画的进度等；props用于在组件树中传递数据，实现数据的单向流动。
生命周期：state与组件的生命周期紧密相关，组件会在state变化时重新渲染；props的变化也会导致组件重新渲染，但props的来源是父组件。

类组件生命周期?

微信图片_20241205151829.png

    componentDidUpdate -- 组件更新（完成DOM渲染）后 -- DOM操作，可以获取到更新后的DOM内容，**不要直接调用setState**
    componentWillUnmount -- 组件卸载（从页面中消失）-- 执行清理工作（比如：清理定时器等）

类组件与函数组件对比?

类组件

    基于ES6语法，通过继承React。component得到的组件；

函数组件

    函数组件也称无状态组件，以函数形式才在的React组件

差异

函数组件相比较类组件，优点是更轻量与灵活，便于逻辑的拆分复用。

类组件有生命周期，函数组件没有
类组件需要继承 Class，函数组件不需要
类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行
类组件内部可以定义并维护 state，函数组件为无状态组件（可以通过hooks实现）

语法不同、设计思想不同

函数式组件是函数式编程思想，而类组件是面向对象编程思想。面向对象编程将属性和方法封装起来，屏蔽很多细节，不利于测试。

生命周期、状态变量

类式组件：使用state对象定义状态变量，有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数；
函数式组件：没有this,使用一系列的内置hooks实现对应的功能，比如使用useState创建状态变量，使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。

React.memo, useMemo, useCallback?

通过 React.memo 包裹组件，可以避免组件的非必要重新渲染。
通过 useMemo，可以避免组件更新时所引发的重复计算。
通过 useCallback，可以避免由于函数引用变动所导致的组件重复渲染。

useReducer vs Redux

useReducer:

React 内置钩子：
- React内置Hook，用于函数式组件中管理局部状态；
- 可以通过定义一个reducer函数来处理状态的更新逻辑，并通过dispatch函数来触发状态；
局部状态管理：
- 主要用于管理组件内部的局部状态；
- 适合较小的应用状态或者与特定组件紧密相关的状态管理；
适用范围：
- 适合小到中型的应用状态管理，通常用于组件内部或少数组件之间共享状态的场景；
- 不适合大型应用的复杂状态管理需求，因为缺乏全局的状态管理和高级特性，如中间件支持、持久化、时间旅行等；

Redux

独立状态管理库：
- 独立的状态管理库，与React无直接关系，但可以与React结合使用；
- 提供一个全局的状态容器（store）来存储应用的所有状态，并通过定义的action和reducer来更新状态；
全局状态管理：
- Redux 适用于管理整个应用的全局状态，通过单一的 Store 存储所有状态。
- 允许多个组件共享和访问同一份状态数据，避免了 props drilling 的问题。
高级特性：
- Redux 提供了丰富的生态系统和工具，如中间件（middleware）支持、时间旅行调试、持久化存储等。
- 这些特性使得 Redux 在处理大型应用的复杂状态管理、异步数据流和优化性能等方面更具优势。

区别：

React 内置 vs 单独库 ：useReducer 是 React 的一部分，专注于组件内部的[状态管理]Redux 则是独立的状态管理库，适用于全局状态管理。

适用范围 ： useReducer 适合于简单到中等规模的局部状态管理；Redux 适合于复杂的全局状态管理需求，尤其是需要处理异步操作和多个组件共享状态的场景。

生态和工具支持 ：Redux 提供了更丰富的生态和工具支持，如 Redux DevTools、各种中间件、插件等，使得开发、调试和维护大型应用更加便捷。

选择 `useReducer` 还是 Redux 取决于你的应用规模和复杂性。
对于简单的局部状态管理，使用 `useReducer` 可以更加轻量和直接；
对于需要复杂状态管理、全局状态共享以及高级特性的应用，Redux 提供了更完整和强大的解决方案。

网络类问题

网络类