【React】常见前端面试题及答案
最新回答
蓝萱薇
2026-10-23 05:45:19
答案：
真实 DOM：全称是「Document Object Model」，即文档对象模型。DOM 是 XML 或 HTML 文件在内存中的表示形式，它以树状结构组织，每个节点都对应着文档中的一部分（如元素、属性或文本）。对真实 DOM 的操作会触发浏览器的回流和重绘，这些操作非常消耗性能。
回流：当 DOM 树中的一部分或全部因为元素的尺寸、布局、隐藏等改变而需要重新构建时，称为回流（或重新布局）。
重绘：当 DOM 树中的一些元素需要更新属性，而这些属性只影响元素的外观和风格而不影响布局时，称为重绘。回流必将引起重绘，但重绘不一定会引起回流。
虚拟 DOM：是 React 引入的一个概念，它是一个 JavaScript 对象，是真实 DOM 在内存中的映射。React 会对比改动前后的虚拟 DOM 的差异，仅将有差异的部分在真实 DOM 上进行改动，而不是全局替换真实 DOM。这种方式大大提升了性能。
区别：
- 真实 DOM 直接操作浏览器中的 DOM 树，性能开销大。
- 虚拟 DOM 在内存中操作 JavaScript 对象，通过对比差异来更新真实 DOM，性能更优。
答案：React 是一个用于构建用户界面的 JavaScript 库，而不是框架。它专注于 UI 组件的创建和状态管理，提供了一套高效的组件化开发方案。与框架相比，React 更加灵活，只负责 UI 层面的工作，而不提供如路由、状态管理等完整解决方案。
3. React 的特点有哪些？答案：
- 单向数据流：React 通过 props 从父组件向子组件传递数据。这种方式保证了数据的流向清晰且易于管理。在需要跨层级传递数据时，可以使用 Context API。
- 服务器端渲染：React 支持服务器端渲染（SSR），即服务器生成 HTML 并发送给客户端，客户端只需解析和渲染现成的 HTML，无需执行额外的 JavaScript 代码。这有助于提升首屏加载速度和用户体验。
- 使用虚拟 DOM：React 通过虚拟 DOM 来优化性能，减少了对真实 DOM 的直接操作，从而提高了应用的响应速度和稳定性。
答案：
- 性能优越：由于使用了虚拟 DOM，React 能够高效地更新 UI，减少了不必要的性能开销。
- 代码可读性好：React 引入了 JSX 语法，使得组件的模板和逻辑可以更加紧密地结合在一起，提高了代码的可读性和可维护性。
- 组件化开发：React 鼓励使用组件化开发方式，将复杂的 UI 拆分成多个可复用的组件，提高了代码的复用性和可维护性。
- 跨浏览器兼容：React 的虚拟 DOM 机制解决了不同浏览器之间的兼容性问题，使得开发者可以更加专注于业务逻辑的实现。
答案：
- 不是完整的框架：React 只是一个库，不提供如路由、状态管理等完整解决方案。开发者需要自行选择并集成这些功能，增加了项目的复杂性和开发成本。
- 学习曲线较陡：React 的概念较多且相对抽象（如虚拟 DOM、JSX、组件生命周期等），对于初学者来说可能需要一定的时间来理解和掌握。
- 复杂的交互需要传递回调函数：在 React 中，父子组件之间的通信通常通过 props 和回调函数来实现。在复杂的交互场景中，可能需要传递多层回调函数来处理事件和数据更新，这增加了代码的复杂性和维护难度。
热门标签
