面试 React 框架八股文十问十答第一期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）React 生命周期是怎样的？

React组件有三个主要阶段的生命周期：

• Mounting（挂载阶段）：
  • constructor(): 初始化state和绑定事件处理函数。
  • static getDerivedStateFromProps(): 从属性初始化state。
  • render(): 根据state和props渲染组件的UI。
  • componentDidMount(): 组件挂载后调用，通常进行异步操作、数据获取等。
• Updating（更新阶段）：
  • static getDerivedStateFromProps(): 当组件接收到新的props时调用。
  • shouldComponentUpdate(): 返回一个布尔值，判断是否重新渲染组件，默认返回true。
  • render(): 根据state和props重新渲染组件的UI。
  • getSnapshotBeforeUpdate(): 在render之后、更新之前调用，通常用于获取更新前的DOM状态。
  • componentDidUpdate(): 组件更新后调用，通常进行DOM操作、网络请求等。
• Unmounting（卸载阶段）：
  • componentWillUnmount(): 组件即将被卸载时调用，通常用于清理定时器、取消网络请求等。

2）虚拟 DOM 实现原理？

虚拟DOM是React用来提高渲染性能的一种机制。其基本原理是在内存中维护一份DOM的虚拟副本，当状态发生变化时，首先在虚拟DOM上进行操作，然后通过比较虚拟DOM和实际DOM的差异（称为协调或reconciliation），最终只对实际DOM中需要变化的部分进行更新。

主要步骤：

1. 创建虚拟DOM树： 组件的状态或属性发生变化时，React会创建一颗新的虚拟DOM树。
2. Diff算法比较差异： 对比新旧虚拟DOM树，找出需要更新的部分。
3. 更新实际DOM： 只对需要变化的部分进行实际DOM操作，提高性能。

3）React 的请求应该放在哪个生命周期中？

数据请求通常放在componentDidMount生命周期方法中。这是因为componentDidMount在组件挂载后调用，适合进行初始化数据的获取。在这个阶段发起请求可以确保组件已经被渲染到DOM中，避免不必要的重复渲染。

4）setState 到底是异步还是同步？

setState在React中是异步的。当你调用setState时，React会将状态更新放入一个队列中，然后异步地执行队列中的状态更新。这种异步机制有助于性能优化，因为React可以批量处理状态更新，避免不必要的重新渲染。

如果需要在setState后执行某些操作，可以在setState的第二个参数中传入一个回调函数，该回调函数将在setState完成并且组件开始重新渲染时被调用。

5）React 组件通信如何实现？

React组件通信有多种方式：

• 父子组件通信： 通过props将数据从父组件传递给子组件。父组件可以通过props传递数据和回调函数给子组件，实现父组件向子组件传递数据和方法。
• 子父组件通信： 子组件可以通过props接收父组件传递的数据和方法。通过在子组件中调用父组件传递的方法，实现子组件向父组件传递信息。
• 兄弟组件通信： 如果兄弟组件之间没有直接的父子关系，可以通过共享状态提升到它们的最近公共父组件，或者使用一些状态管理工具（如Redux、Context API）来实现兄弟组件之间的通信。
• 使用Context API： React的Context API可以在组件树中传递数据，避免了手动层层传递props的麻烦。通过React.createContext创建Provider和Consumer，组件可以订阅Provider的值。
• 使用状态管理库： 使用像Redux、Mobx这样的状态管理库，可以将状态集中管理，实现组件之间的通信。

6）React 如何实现组件复用？

React实现组件复用的主要方式包括：

• 组件组合： 将多个小组件组合在一起形成一个复杂的组件，通过嵌套组件的方式来实现复用。
• Props： 利用组件的props属性传递不同的数据和配置，使同一个组件能够展示不同的内容。
• 高阶组件（HOC）： 高阶组件是一个函数，接受一个组件作为参数并返回一个新的组件，通过这种方式可以对现有组件进行包装，添加额外的功能或逻辑。
• Render Props： Render Props是指通过组件的prop将一个函数传递给子组件，子组件通过调用这个函数来获取需要的数据或功能。
• Hooks： 使用React Hooks（如useState、useEffect）来实现逻辑的复用，可以将共享的状态和副作用提取到自定义的hook中，然后在多个组件中复用。

7）mixin、hoc、render props、react-hooks的优劣如何？

• Mixin：
  • 优点：简单，能够实现代码的重用。
  • 缺点：可能导致命名冲突、难以维护，不够灵活。
• HOC（高阶组件）：
  • 优点：提供了一种将组件逻辑复用的机制，可用于横切关注点的封装。
  • 缺点：嵌套过多时可能难以理解，容易出现命名冲突。
• Render Props：
  • 优点：通过props传递函数，更加灵活，可以选择性地共享逻辑。
  • 缺点：嵌套过多时可读性下降。
• React Hooks：
  • 优点：简洁，逻辑清晰，可在函数组件中共享状态和副作用。
  • 缺点：某些场景下使用Hooks可能需要重新组织组件的结构。

8）你是如何理解 fiber 的？

Fiber是React 16引入的一种新的协调引擎，用于实现React的协调和调度。它主要解决了之前的"stack reconciliation"方式在处理大型应用时可能导致的性能问题。

Fiber的关键概念和特点包括：

• 可中断的： Fiber允许React在渲染过程中中断、优先级调度和恢复，使得React可以更灵活地处理用户交互和渲染。
• 优先级调度： Fiber引入了优先级概念，允许React根据任务的紧急程度决定何时处理更新，从而更好地响应用户输入和保持流畅的用户体验。
• 增量渲染： Fiber实现了增量渲染，可以将渲染任务分割成多个小任务，分散到多个帧中执行，提高了渲染的效率。
• 可组合的： Fiber的架构使得React能够更容易地实现一些高级的特性，比如异步渲染、错误边界等。

9）异步渲染有哪两个阶段？

异步渲染有两个主要阶段：

• Reconciliation（协调阶段）： 在这个阶段，React会比较新旧虚拟DOM树的差异，找出需要更新的部分，生成更新的任务。
• Commit（提交阶段）： 在这个阶段，React会将协调阶段生成的更新任务应用到实际的DOM上，完成渲染。这个阶段是同步的，因为它直接涉及到对DOM的操作。

异步渲染通过将工作分为两个阶段，使得React能够更好地响应用户输入，提高了渲染的效率。

10）你对 Time Slice 的理解？

Time Slice是React中的一项特性，旨在改善大型React应用的用户体验。它允许React在多个帧中分割工作，以保持页面的响应性。

具体来说，Time Slice使用了浏览器的空闲时间（Idle Callback API），将一个耗时较长的任务分割成小块，在多个帧中逐步执行。这样，长任务的执行不会阻塞主线程，从而避免了页面的卡顿和用户交互的延迟。

Time Slice的实现涉及到React调度器的改进，它使得React可以更加灵活地处理任务的执行，根据优先级和空闲时间智能地分配工作。这有助于提高应用的整体性能，特别是在大型和复杂的应用中。