面试葵花宝典之React（持续更新中）

1.谈谈你对HOC的理解

定义：高阶组件是一个接收组件 作为参数并返回新组件的函数 ，用于复用组件逻辑，遵循纯函数特性（无副作用，输出仅依赖输入）。

组合性 ：可嵌套使用多个 HOC。
HOC（Higher-Order Component，高阶组件）是 React 中的一种设计模式，它本质上是一个函数，接受一个组件作为参数，返回一个新的组件。这个新组件通常会添加一些额外的功能或者修改原有组件的行为，而不直接修改原组件的代码。

主要特点：

增强组件功能：HOC 允许你在不修改原组件的情况下，给它添加额外的逻辑或功能。比如：权限控制、数据获取、日志记录、条件渲染等。
纯函数：HOC 只是一个函数，它不改变原组件的实例，而是返回一个新的组件。传入的原组件将成为 HOC 的输入，返回的新组件是带有附加功能的组件。
组合性：多个 HOC 可以被组合在一起，形成一个强大的功能组合。这使得 React 的组件变得更加灵活和可复用。

常见应用场景：

状态共享：多个组件之间可以通过 HOC 共享相同的状态逻辑。
权限控制：HOC 可以用于根据用户权限来渲染不同的 UI。
生命周期管理：在 HOC 中添加钩子函数，可以封装组件的生命周期操作。
代码复用：例如，处理 API 请求的 HOC 可以应用于多个组件，而不需要每个组件都重复编写相同的请求逻辑。

优缺点：

优点：

增强可复用性：将常见的逻辑封装成 HOC，可以在多个地方复用。
逻辑与视图分离：HOC 使得 UI 和逻辑功能分离，提高代码的可维护性和可测试性。
组合性强：HOC 可以通过组合多个不同的功能来增强组件的功能。

缺点：

命名冲突：HOC 可能会给组件的属性命名带来冲突，尤其是在 HOC 之间传递 props 时。
复杂性增加：如果过度使用 HOC，可能会导致组件树变得复杂，难以调试和维护。
性能问题：每次通过 HOC 包装一个组件时，都会返回一个新的组件，这可能导致不必要的渲染，影响性能。

HOC详细点击查看

2.谈谈你对React Fiber的理解

先概述它的基本概念、解决的问题、以及它如何影响 React 的工作方式。然后，我会深入讲解它的核心特性和实现原理，最后给出一个应用场景，展示我对它的实际理解。

React Fiber 是 React 内部的一个新的调度引擎，旨在优化 React 的渲染过程，提高渲染的可控性和性能，尤其是在处理复杂 UI 和高频率更新时。目标是使React能够更好地处理大型应用和动态更

1. 为什么需要 Fiber？

JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待如果 JavaScript线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿也就是早期版本中使用的叫做"栈式调度"的渲染算法。这个算法是同步的，也就是说，React 渲染一个组件时，会阻塞后续的工作，直到渲染过程完成。当React在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程这就会导致一些用户交互、动画等任务无法立即得到处理，导致卡顿的情况，

JavaScript执行Javascript引擎和页面渲染在同一个线程中，GUI渲染和Javascript执行两者之间是互斥的工如果某个任务执行时间过长，浏览器就会推迟渲染。这就引入了Fiber

Fiber 作为 React 的新架构，主要是为了引入"增量渲染"，使得渲染过程可以被中断并分片执行，允许 React 在渲染期间执行其他更紧急的任务，从而改善性能。

2. Fiber 解决了什么问题？

异步渲染：Fiber 使得 React 渲染过程可以被分割成多个小任务，任务之间可以被中断和重新调度。这样，当 React 正在渲染时，它可以暂停当前的渲染工作，去处理一些更重要的任务（比如用户输入、动画等）。
优先级调度：通过 Fiber，React 能够为不同的渲染任务设置优先级。例如，用户输入和动画可以拥有更高的优先级，而不那么重要的任务（如更新某个非关键的 UI 元素）可以有更低的优先级，从而保证高优先级任务尽快完成。
改进的生命周期管理：React 通过 Fiber 可以更好地管理组件生命周期，处理复杂的场景，如 React Suspense 和 Concurrent Mode，这些特性在 Fiber 的架构下能够得到更好的支持。

3. Fiber 的核心特性和实现：

增量渲染（Incremental Rendering） ：Fiber 将渲染过程分解为多个小任务，每个任务都可以中断和恢复。通过这种方式，React 可以在渲染中间进行调度，优先处理高优先级的任务，如用户交互。
优先级调度（Prioritization） ：Fiber 引入了优先级的概念。不同的渲染任务可以根据它们的优先级被调度。比如：
- 用户交互（例如点击、滚动等）通常是高优先级的。
- 状态更新或背景渲染可能是低优先级的。
Fiber 树：Fiber 引入了一种新的数据结构------Fiber 树，它是虚拟 DOM 的一个升级版。每个 Fiber 节点都表示一个组件实例，包含了关于组件的所有信息，包括它的状态、渲染结果、生命周期方法等。
- Work Units：每个 Fiber 节点对应一个"工作单元"，这些单元可以被异步执行。React 可以把渲染工作分成更小的单位，按需处理。
Time Slicing：通过 Fiber，React 可以将大任务切割成多个小任务，在渲染的过程中"切片"时间，让浏览器有机会处理其他任务，比如用户输入、动画等，从而避免界面卡顿。

4. Fiber 与 React 之前版本的区别：

同步 vs 异步：在 React Fiber 之前，React 的渲染过程是同步的。也就是说，组件渲染是阻塞式的，直到整个渲染完成。在 Fiber 中，渲染过程被拆解成多个小任务，可以异步执行。
改进的生命周期 ：Fiber 引入了新的生命周期方法，特别是针对异步渲染的生命周期方法（如 getDerivedStateFromProps 和 getSnapshotBeforeUpdate），这些方法有助于提升组件的性能和响应性。
并发渲染：Fiber 使得 React 能够支持并发渲染（Concurrent Rendering）。这意味着 React 可以在多个任务之间切换，优先处理用户交互、动画等高优先级任务，降低长时间渲染对用户体验的影响。

5. Fiber 在实际应用中的优势：

改善复杂动画：对于需要频繁更新的动画或交互式 UI，Fiber 通过异步渲染和优先级调度可以避免动画卡顿，提升流畅度。
React Suspense：Fiber 是 React Suspense 功能的基础。它允许 React 在数据加载时"暂停"渲染，等数据准备好后再继续渲染，提升了数据驱动应用的响应速度和流畅性。
并发模式（Concurrent Mode） ：Fiber 为并发模式奠定了基础，使得 React 可以同时渲染多个版本的 UI，进一步提升性能和用户体验。

总结：

React Fiber 是 React 渲染引擎的一次重大升级，通过引入异步渲染、优先级调度和增量渲染，极大提升了 React 的性能和灵活性。它为未来的 React 特性（如并发模式和 Suspense）提供了基础，同时也优化了复杂 UI 更新和高频交互的性能。虽然 Fiber 的实现较为复杂，但它为 React 提供了更强大的能力，尤其是在需要精细控制渲染过程的场景中。

具体fiber原理见：https://blog.csdn.net/qq_34645412/article/details/145886426?spm=1001.2014.3001.5501