React 17 道面试题及答案.docx

React 17 道面试题及答案 React 是一个流行的前端框架，由 Facebook 开发，用于构建用户界面。它的主要特点是组件化、虚拟 DOM 和生命周期管理。下面是 React 17 版本的一些重要知识点。 一、为什么选择使用框架而不是原生？ 使用框架的好处有四点： 1. 组件化：React 的组件化最为彻底，甚至可以到函数级别的原子组件，高度的组件化可以使我们的工程易于维护、易于组合拓展。 2. 天然分层：现代框架都可以帮助我们进行分层，代码解耦更易于读写。 3. 生态：现在主流前端框架都自带生态，不管是数据流管理架构还是 UI 库都有成熟的解决方案。 4. 开发效率：现代前端框架都默认自动更新 DOM，而非我们手动操作，解放了开发者的手动 DOM 成本，提高开发效率，从根本上解决了 UI 与状态同步问题。 二、虚拟 DOM 的优劣 虚拟 DOM 的优点有三点： 1. 保证性能下限：虚拟 DOM 可以经过 diff 找出最小差异，然后批量进行 patch，这种操作虽然比不上手动优化，但是比起粗暴的 DOM 操作性能要好很多，因此虚拟 DOM 可以保证性能下限。 2. 无需手动操作 DOM：虚拟 DOM 的 diff 和 patch 都是在一次更新中自动进行的，我们无需手动操作 DOM，极大提高开发效率。 3. 跨平台：虚拟 DOM 本质上是 JavaScript 对象，而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、移动端开发等等。 虚拟 DOM 的缺点是无法进行极致优化，在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。 三、虚拟 DOM 实现原理 虚拟 DOM 的实现原理是： 1. 虚拟 DOM 本质上是 JavaScript 对象，是对真实 DOM 的抽象。 2. 状态变更时，记录新树和旧树的差异。 3. 最后把差异更新到真正的 DOM 中。 四、React 的生命周期 React 16 之后，有三个生命周期被废弃（但并未删除）：componentWillMount、componentWillReceiveProps、componentWillUpdate。官方计划在 17 版本完全删除这三个函数，只保留 UNSAFE_ 前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们。 React 16.8+ 的生命周期分为三个阶段：挂载阶段、更新阶段、卸载阶段。每个阶段都有不同的生命周期函数，例如 constructor、getDerivedStateFromProps、render、componentDidMount 等等。 五、React 的其他知识点 React 还有许多其他的知识点，例如 JSX、Props、State、Context API、 Hook 等等。这些知识点都是 React 开发中必不可少的基础知识。