[20250119]-前端面试题——React篇

程序员kk1108

已于 2025-01-19 19:57:03 修改

阅读量718

点赞数 15

文章标签：前端

于 2025-01-19 19:53:59 首次发布

本文链接：https://blog.youkuaiyun.com/kenis1108/article/details/145246722

版权

面试问题记录

请简单介绍一下React18有哪些更新。

React 18 的主要更新包括：

并发渲染：React 18 引入了并发渲染（Concurrent Rendering），使得 React 能在后台进行渲染工作，避免阻塞 UI 更新，提升性能。
自动批处理：React 18 会自动批处理多次 setState 更新，减少不必要的渲染，提升性能。
useId Hook：提供一个生成唯一 ID 的 Hook，帮助解决 SSR（服务器端渲染）中的 ID 不一致问题。
startTransition API：允许开发者将某些更新标记为低优先级，确保高优先级的渲染不被阻塞。
Suspense 支持 SSR：Suspense 现在支持服务端渲染（SSR），使得异步组件加载更加平滑。

这些更新提升了 React 的性能和开发体验，特别是在处理复杂 UI 和异步渲染时。

JSX是什么，它和JS有什么区别？

JSX 是 JavaScript 的语法扩展，用于在 React 中描述 UI 结构，看起来像 HTML，但最终会被编译为 JavaScript 代码（如 React.createElement 调用）。

JSX 和 JS 的区别

请说一下React 事件机制和JS原生事件机制的区别

React 的事件机制是对浏览器原生事件机制的一层封装，主要区别如下：

React：
React 使用合成事件 (SyntheticEvent) 统一处理跨浏览器的事件兼容性。
- 所有事件都通过虚拟 DOM 绑定在顶层容器（如 document 或 root 节点）。
- React 内部通过事件委托机制来管理事件监听，减少 DOM 事件绑定的数量。
示例：
```
<button onClick={() => console.log('React event')}>Click Me</button>
```
JS 原生：
原生事件绑定在具体的 DOM 元素上。可以选择直接在 HTML 中写内联事件，或通过 JavaScript 使用 addEventListener 绑定事件。

示例：
```
const button = document.querySelector('button');
button.addEventListener('click', () => console.log('Native event'));
```

React：
React 的事件绑定在顶层，通过事件冒泡机制和事件委托捕获事件。React 的事件模型不会直接操作真实 DOM，而是通过虚拟 DOM 映射真实 DOM。
- React 中的事件冒泡阶段发生在虚拟 DOM 层面。
- 事件可以被 stopPropagation() 和 preventDefault() 拦截，但影响的是合成事件。
JS 原生：
原生事件模型分为 捕获阶段、目标阶段 和 冒泡阶段，直接绑定在真实 DOM 上。

React：
React 的事件对象是 SyntheticEvent，这是对原生事件对象的封装，提供了跨浏览器的统一接口。
- 属性和方法与原生事件类似，但不完全一致。
- SyntheticEvent 是轻量的，会被回收，因此不能异步访问。
示例：
```
const handleClick = (e) => {
  console.log(e.nativeEvent); // 原生事件对象
  console.log(e); // React SyntheticEvent
};
```
JS 原生：
原生事件对象直接提供浏览器的 Event 对象，包含原生 DOM 事件信息。

JS 原生：
原生事件需要手动移除监听器，否则可能会造成内存泄漏。
示例：

const handleClick = () => console.log('Clicked');
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

React：
React 内部默认使用事件委托，将所有事件绑定在顶层容器上（如 document）。
- 因此，不需要手动实现事件委托，子元素的事件冒泡会被 React 捕获并处理。
JS 原生：
如果需要事件委托，需手动绑定事件到父元素并通过事件冒泡机制进行处理。