前端面试题集

适配问题

react相关问题

网络问题

性能问题

兼容性问题

工程化问题

安全问题

移动端适配问题。

createElement 和 cloneElement 有什么区别？

传入的第一个参数不同

React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。

它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

1

React.createElement(type, [props], [...children]);

React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。将保留原始元素的键和引用。

1

React.cloneElement(element, [props], [...children]);

1、react 父组件怎么调用子组件的方法

‌函数组件使用 forwardRef+useImperativeHandle‌：子组件通过useImperativeHandle暴露方法，父组件通过ref调用

2、react useEffect 依赖项数组为空 或者不写数组有啥区别

空数组[]‌：仅在挂载时执行一次，卸载时清理
‌不传数组‌：每次渲染后都会执行
‌含依赖项‌：依赖变化时执行MCP_3]^

1、react性能优化
1.1、useMemo
1.2、useCallback

2. useLayoutEffect () 与 useEffect () 的区别
   useLayoutEffect会阻塞浏览器渲染，useEffect不会
   useEffect()：异步执行，DOM 更新后触发（适合大多数副作用）。
   useLayoutEffect()：同步执行，DOM 更新前触发（适合需要测量 DOM 的场景）。

React.memo 缓存组件，避免无意义重新渲染
useMemo/useCallback 缓存函数或计算结果

3、usecontext,有什么作用和缺点

优点‌：
跨组件层级共享状态
避免prop drilling
‌缺点‌：
状态更新会导致所有消费者重新渲染
不适合高频更新的场景MCP_3]^

4、react组件逻辑服用怎么弄。

React组件逻辑复用
‌自定义Hooks‌：提取通用逻辑为可复用函数
‌HOC高阶组件‌：通过组件包装增强功能
‌Render Props‌：通过函数prop共享代码
‌Context API‌：跨层级状态共享MCP_3]^

5、React Hooks 的作用和常用 Hook 有哪些？

答案：
React Hooks 是 React 16.8 引入的特性，允许在函数组件中使用状态和其他 React 特性，而不需要编写类组件。

作用：

• 在函数组件中使用状态和生命周期特性
• 复用状态逻辑，而不需要改变组件层次结构
• 将相关逻辑组合在一起，而不是按生命周期方法分散

常用的 Hook：

• useState：管理组件状态
• useEffect：处理副作用（类似 componentDidMount、componentDidUpdate、componentWillUnmount）
• useContext：访问 React Context
• useReducer：使用 reducer 管理复杂状态逻辑
• useCallback：记忆函数，避免不必要的重新渲染
• useMemo：记忆计算结果，避免重复计算
• useRef：保存可变值，不触发重新渲染

状态管理工具（Redux/Vuex/Pinia）的核心概念和工作原理

答案：
状态管理工具用于集中管理应用的状态，使状态变化可预测和可追踪。

Redux（React）核心概念：

• Store：存储应用的状态
• Action：描述状态变化的普通对象
• Reducer：纯函数，根据当前状态和 action 计算新状态
• Dispatch：发送 action 的方法
• Middleware：扩展 Redux 功能的中间件（如处理异步操作）

6、闭包是什么？有什么用途和潜在问题？

答案：
闭包是指一个函数可以记住并访问其词法作用域，即使该函数在其词法作用域之外执行。

用途：

• 数据私有化/封装
• 创建函数工厂
• 实现模块模式
• 维持状态

潜在问题：

• 内存泄漏：闭包会保持对外部变量的引用，可能导致这些变量无法被垃圾回收
• 性能问题：过度使用闭包可能影响性能

解释 JavaScript 中的原型和原型链
答案：
JavaScript 中的每个对象都有一个原型（prototype），原型也是一个对象，对象可以从原型继承属性和方法。

• 原型：每个函数都有一个 prototype 属性，指向一个对象，这个对象就是该函数的实例的原型
• 原型链：当访问一个对象的属性时，如果对象本身没有这个属性，JavaScript 会沿着原型链向上查找，直到找到该属性或到达原型链的末端（null）

解释事件循环（Event Loop）机制

答案：
JavaScript 是单线程的，事件循环是 JavaScript 实现异步的核心机制，它由以下部分组成：

• 调用栈（Call Stack）：执行同步代码
• 任务队列（Task Queue）：
  • 宏任务（Macrotask）：setTimeout、setInterval、I/O、UI 渲染等
  • 微任务（Microtask）：Promise 回调、MutationObserver、queueMicrotask() 等

事件循环的执行顺序：

1. 执行同步代码（调用栈中的任务）
2. 执行所有微任务
3. 执行一个宏任务
4. 重复步骤 2-3

Prev: Vue 3 源码解读

Next: 前端面试题集