2024 React 面试问答

1. react 和 vue 对比，优劣势是什么？你会如何选择

React 和 Vue 是两个流行的前端框架，它们各有优势和劣势。选择哪个框架取决于项目需求、团队技能以及个人偏好。

React:

优势：

灵活性： React 提供了更大的灵活性，因为它是一个库而不是框架，所以你可以根据需要选择其他库和工具来完善你的应用程序。
虚拟DOM： React 使用虚拟DOM 来优化性能，使得页面渲染更加高效。
社区和生态系统： React 拥有一个庞大的社区支持，有丰富的第三方库和工具，使得开发过程更加高效。
JSX： JSX 让你可以在 JavaScript 中编写类似 HTML 的代码，提高了组件的可读性和可维护性。

劣势：

学习曲线： 对于新手来说，学习 React 可能会有一定的难度，因为它需要理解一些新的概念，如虚拟DOM 和单向数据流。
决策自由： React 提供了很多灵活性，但这也意味着你需要做出更多的决策来选择最适合你项目的库和工具。

Vue:

优势：

简单易学： Vue 的 API 设计简单直观，学习曲线相对较低，尤其适合初学者或小团队。
文档和指南： Vue 提供了清晰、详尽的文档和指南，为开发者提供了良好的学习资源。
双向数据绑定： Vue 支持双向数据绑定，使得数据和视图之间的同步更加方便。
单文件组件： Vue 允许你将模板、脚本和样式封装在一个单文件组件中，使得组件更加模块化和易于维护。

劣势：

规模较小的生态系统： 相对于 React，Vue 的生态系统规模较小，可能会在特定场景下找不到对应的解决方案或库。
可塑性较低： Vue 的可塑性较低，相比之下，它提供的选项较少，可能无法满足一些特定需求。

如何选择：

项目需求： 如果你的项目需要更大的灵活性和自由度，以及更大的社区支持，可以选择 React。如果你的项目规模较小，而且你更喜欢简单直观的 API 设计，可以选择 Vue。
团队技能： 考虑团队成员的技能水平和经验。如果团队成员已经熟悉了 React 或 Vue 中的一种，那么选择对应的框架可能会更加高效。
项目规模： 对于小型项目，Vue 可能更加适合，因为它的学习曲线较低，上手更快。而对于大型项目，React 的灵活性和性能优化可能更加重要。

2. react hooks 诞生的原因是什么？为了解决什么问题

React Hooks 的诞生是为了解决 React 类组件在复杂逻辑共享和复用方面的一些限制和问题。在 React 16.8 版本中引入了 Hooks，它们提供了一种在函数组件中使用状态管理和其他 React 特性的新方式，从而使得函数组件可以拥有类似于类组件的能力。

主要原因和解决的问题包括：

逻辑复用的困难： 在 React 中，逻辑复用通常通过高阶组件 (HOC) 或渲染属性 (Render Props) 来实现，但这种方法会导致组件层级过深、嵌套过多，不利于代码的可读性和维护性。

Hooks 提供了自定义 Hook 的能力，使得逻辑可以更方便地共享和复用，将逻辑抽象为可复用的函数，可以在多个组件中使用。
类组件的限制： 在类组件中，需要使用生命周期方法来处理状态、副作用等，但这些方法有时候会导致代码的冗余和混乱，尤其是在处理复杂的异步逻辑时。

Hooks 提供了一种更直接、更简洁的方式来管理组件的状态、生命周期和副作用，通过 useState、useEffect 等钩子函数，可以更清晰地组织代码，减少冗余。
难以理解的 this 上下文： 在类组件中，this 上下文的使用可能会造成一些混淆和错误，特别是在事件处理和回调中。

Hooks 是函数式的，没有 this 上下文的问题，这使得代码更易于理解和调试。
更好的性能优化： Hooks 可以帮助 React 更有效地执行更新，因为它们使得组件逻辑更加明确，React 可以更好地理解和优化组件的渲染过程。

总的来说，React Hooks 的出现使得函数组件可以拥有类组件相近的能力，更好地解决了逻辑复用、代码组织和性能优化等方面的问题，提高了 React 的开发效率和代码质量。

3. hooks 带来了哪些新的问题？编写时如何注意

虽然 React Hooks 带来了许多好处，但也引入了一些新的问题需要注意。在编写使用 Hooks 的代码时，可以注意以下几点：

闭包陷阱： 当在 useEffect 或自定义 Hook 中使用了闭包时，需要注意闭包的作用域。闭包中的变量可能会捕获 Hook 调用时的状态值，而不是最新的值，导致不符合预期的行为。解决方法是使用 useCallback 或 useMemo 来确保闭包中使用的是最新的状态值。
Hook 调用顺序的一致性： React 要求 Hook 的调用顺序在每次渲染时保持一致。如果不遵循这个规则，可能会导致状态错误或组件行为不一致。因此，在编写 Hook 时，一定要保证 Hook 的调用顺序不会改变。
副作用管理： 在使用 useEffect 进行副作用管理时，需要注意确保副作用的正确执行和清除。避免出现内存泄漏或无限循环的情况，需要正确处理依赖数组和清除函数。
性能优化： Hooks 的使用可能会导致不必要的重新渲染，尤其是在函数组件中频繁创建新的函数。可以使用 useCallback 和 useMemo 来优化性能，避免不必要的重新渲染。
组件拆分和复用： 在编写复杂组件时，需要考虑如何将组件拆分为更小的部分，并合理地使用自定义 Hook 进行逻辑复用。同时要注意确保 Hook 的单一职责原则，使得每个 Hook 只处理一种逻辑。
调试和错误处理： Hooks 的错误信息可能会比较难以理解，特别是在处理副作用时。建议使用 React 开发工具和浏览器的开发者工具来调试和定位问题，同时编写清晰的错误处理逻辑。

综上所述，虽然 React Hooks 带来了很多便利，但在使用时仍需要注意一些潜在的问题，特别是在状态管理、副作用处理和性能优化方面。通过遵循最佳实践和规范，可以有效地减少这些问题的发生。

4. Class 组件和 Function 组件的优劣对比

Class 组件和 Function 组件是 React 中两种主要的组件类型，它们各有优劣，选择哪种类型取决于具体的需求和个人偏好。

Class 组件：

优势：

具有状态： Class 组件可以拥有自己的状态 (state)，使得组件可以保存和管理自己的数据。
生命周期方法： Class 组件提供了一系列生命周期方法，可以让开发者在组件不同阶段执行特定的逻辑，例如 componentDidMount、componentDidUpdate 等。
实例化： 每个 Class 组件都是一个实例，可以通过 this 访问组件的属性和方法，提供了更多的灵活性和控制能力。
容易理解： 对于有经验的开发者来说，Class 组件的语法更接近传统的面向对象编程范式，因此更容易理解和使用。

劣势：

冗长： 编写 Class 组件需要更多的代码，包括构造函数、生命周期方法等，使得代码显得冗长和复杂。
性能开销： Class 组件可能会导致更多的内存开销和性能损耗，因为它们创建了额外的实例和原型链。

Function 组件 (使用 Hooks)：

优势：

简洁： Function 组件相比于 Class 组件代码更加简洁，没有繁琐的生命周期方法和构造函数，易于阅读和编写。
性能优化： Function 组件由于不需要创建额外的实例和原型链，可能比 Class 组件具有更好的性能。
函数式编程： Function 组件更符合函数式编程的理念，将组件视为纯函数，输入 props 输出 UI，这种思想更容易推广和理解。
Hooks： Function 组件可以使用 Hooks 来管理状态和副作用，提供了更灵活、更强大的功能，可以完全替代 Class 组件的功能。

劣势：

没有实例化： Function 组件没有实例化的概念，不能使用 this 来访问组件的属性和方法，因此在某些情况下，可能会显得不够灵活。
不完全支持生命周期： Function 组件并不完全支持所有的生命周期方法，例如 componentDidCatch、getDerivedStateFromProps 等。

如何选择：

如果项目中需要使用到生命周期方法、需要维护内部状态或者需要更多的实例控制时，可以选择使用 Class 组件。
如果项目追求简洁、性能优化，并且不需要使用生命周期方法，可以选择使用 Function 组件，并结合 Hooks 来管理状态和副作用。

综上所述，Class 组件和 Function 组件各有优劣，开发者应根据项目需求和个人偏好来选择合适的组件类型。在新项目中，React 官方也更推荐使用 Function 组件和 Hooks 来编写组件。

5. 说一下 hooks 的闭包问题

在使用 React Hooks 时，闭包问题是需要注意的一种情况，特别是在使用 useEffect 和自定义 Hook 中。

当在 useEffect 中引用了某些值时，它们会形成闭包。闭包是指一个函数引用了函数外部的变量，即使外部函数执行完毕，这些变量仍然存在于内存中，并且可以被内部函数访问。在 React 组件中，由于 useEffect 的回调函数是在组件渲染时创建的，因此它可以访问到组件作用域中的任何变量。这可能会导致一些意想不到的结果，特别是在依赖数组中使用了外部的状态值。

举个例子：

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log(count); // 闭包中引用了外部的 count 变量
      setCount(count + 1); // 此处的 count 并不会是最新的值
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // 注意这里的依赖数组为空

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

在这个例子中，我们希望每秒钟增加一次计数器。然而，由于 useEffect 中的回调函数形成了闭包，它引用了组件作用域中的 count 变量。而这个 count 变量是在组件函数每次渲染时创建的闭包，而不是在 useEffect 中创建的。因此，即使 count 更新了，useEffect 中的回调函数仍然使用的是更新前的旧值，导致计数器不会按预期工作。

要解决这个问题，可以通过在 useEffect 的依赖数组中添加 count 来更新 useEffect 的执行时机，确保每次 count 发生变化时都会重新执行 useEffect 中的回调函数，从而获取到最新的 count 值。

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log(count);
    setCount(prevCount => prevCount + 1); // 使用函数式更新确保获取到最新的 count 值
  }, 1000);

  return () => clearInterval(intervalId);
}, [count]); // 依赖数组中添加了 count

通过这种方式，可以避免由于闭包引起的问题，确保在 useEffect 中始终使用到最新的状态值。

6. function 组件每次渲染都会生新执行，useState/useRef 如何保存值不被清除

在 Function 组件中，每次组件重新渲染时，函数组件都会重新执行。这意味着在函数组件内部声明的变量或状态会在每次渲染时重新初始化。如果需要在多次渲染之间保留状态或引用，可以使用 useState 和 useRef 来保存值而不被清除。

使用 `useState` 保存状态：

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // 在函数组件中使用 count 状态值
  // 在每次渲染时，count 都会被重新初始化，但是每次重新渲染时，useState 内部会保留前一次渲染的值
  // 这样可以确保在组件重新渲染时保留之前的状态
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

在上面的例子中，useState 会在组件渲染时创建一个状态变量 count，并返回一个包含状态值和更新状态的函数 setCount。每次渲染时，count 的值会被保留，因为 React 内部会负责处理状态的更新和保留。

使用 `useRef` 保存引用：

import React, { useRef } from 'react';

function MyComponent() {
  const countRef = useRef(0);

  // 在函数组件中使用 countRef.current 引用
  // useRef 返回的 ref 对象在组件的生命周期内保持不变
  // 因此 countRef.current 的值会在多次渲染之间保持一致
  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={() => { countRef.current++; }}>Increment</button>
    </div>
  );
}

export default MyComponent;

在这个例子中，useRef 创建了一个持久化的引用对象 countRef，并初始化了其 current 属性为 0。每次渲染时，countRef.current 的值都会保留，因为 useRef 返回的对象在组件的生命周期内保持不变。

7. 什么是 Fiber?诞生背景是什么

Fiber 是 React 16 中引入的新的协调引擎（reconciliation algorithm）或渲染架构，它主要的目标是提高 React 应用的性能，尤其是动画、布局和手势等场景的性能。Fiber 能够为 React 的渲染和更新提供更好的可预测性，并能够利用分块更新（chunking）、暂停、中止或重用工作的能力，以及为不同类型的更新分配优先级。

背景

在 Fiber 之前，React 使用的协调算法有一个主要的限制，即一旦开始渲染，就必须同步完成整个组件树的渲染。这意味着 React 无法中断工作以确保主线程的响应性。对于大型应用或复杂界面更新，这可能导致主线程阻塞，从而影响到动画的流畅度、输入响应等。

为了解决这些问题，React 团队重新设计了协调算法，引入了 Fiber。以下是一些 Fiber 的关键特性：

关键特性

增量渲染（Incremental Rendering）：Fiber 能够将渲染工作分割成多个小任务，而不是像以前那样一次性处理整个组件树。这样 React 可以根据需要在多个帧上分配这些任务。
任务可中断：Fiber 架构允许 React 暂停正在进行的工作，先执行更高优先级的工作，然后再回来完成之前的工作。这使得 React 可以保持应用的响应性，即使在大量更新发生时也是如此。
错误处理：Fiber 引入了一种新的错误边界（error boundaries）概念，这让组件能够捕获子组件树中的 JavaScript 错误，记录这些错误，并显示备用 UI。
更好的优先级管理：Fiber 允许 React 根据任务的重要性给它们分配不同的优先级。例如，动画更新可以被赋予高优先级，而数据抓取则可以是低优先级。
新的生命周期方法：为了适应 Fiber 架构，React 引入了新的生命周期方法（如getDerivedStateFromProps），这些方法适用于新的渲染策略。

实现细节

Fiber 实际上是对 React 虚拟 DOM 的每个节点的重新实现。每个 Fiber 节点代表一个工作单元，它对应一个 React 元素、组件实例或 DOM 节点。这个新的结构是个单链表的形式，允许 React 在执行中逐节点遍历和操作。

每个 Fiber 节点都有自己的内部状态和对其他 Fiber 节点的引用（例如，对子节点、父节点、兄弟节点的引用），以及对实际 DOM 节点的引用（如果有的话）。React 可以独立地更新这些 Fiber 节点，这是 Fiber 架构的核心优势，它允许任务分割和中断工作。

总之，Fiber 的引入使得 React 更加强大和高效，特别是在处理大规模应用和复杂更新时。它为未来的 React 特性和优化提供了基础，包括异步渲染和并发模式（Concurrent Mode），这些都是 React 应用未来性能提升的关键方面。

8. 任务优先级如何处理的？底层模型是什么

React Fiber 中的任务优先级处理是通过任务调度器来实现的。底层模型包括两个重要的数据结构：工作单元（Fiber）和调度器。

1. 工作单元（Fiber）：

Fiber 是 React 中的一种数据结构，代表了组件树中的一个节点，每个 Fiber 对象对应一个组件或 DOM 节点。Fiber 对象保存了组件的状态、属性、子节点等信息，以及与调度相关的信息，如优先级、时间戳等。每个 Fiber 对象都有一个指向其下一个兄弟节点的指针（sibling），以及指向其第一个子节点的指针（child）。

2. 调度器：

React 的调度器负责根据任务的优先级动态调度任务的执行顺序。调度器会根据任务的优先级和其他条件决定哪个任务应该先执行，哪个任务应该暂停或者中断，以及何时恢复任务的执行。

任务优先级处理流程：

任务调度： 当有新的任务需要执行时，调度器会根据任务的优先级决定任务的执行顺序。高优先级的任务会被优先执行，低优先级的任务会被延迟执行或者暂停。
任务分割： 如果一个任务需要执行时间较长，为了保证页面的流畅性，调度器会将该任务分割为多个小任务单元，并根据优先级逐步执行。每个小任务单元执行完毕后，会检查是否有更高优先级的任务需要执行，如果有，则中断当前任务的执行，执行更高优先级的任务。
中断和恢复： 调度器可以在任意时刻中断正在执行的任务，并将控制权交给更高优先级的任务。被中断的任务会被暂停，并保存当前的执行状态，以便稍后恢复执行。一旦更高优先级的任务执行完毕，调度器会根据优先级重新安排任务的执行顺序，并恢复被中断的任务的执行。
优先级反转： 为了避免低优先级任务一直被高优先级任务所抢占，React 使用了优先级反转的策略。当一个低优先级任务正在执行时，如果有更高优先级的任务需要执行，React 会暂停低优先级任务的执行，并执行更高优先级的任务，直到更高优先级的任务执行完毕。这样可以保证高优先级任务及时得到执行，避免了低优先级任务长时间占用资源的情况。

综上所述，React Fiber 中的任务优先级处理是通过调度器来实现的，调度器根据任务的优先级动态调度任务的执行顺序，并根据情况暂停、中断和恢复任务的执行，从而保证页面的流畅性和用户体验。

9. 这种模型下，如何实现任务中断的？用了什么技术

在 React Fiber 中，任务中断是通过 JavaScript 单线程的特性和异步调度器来实现的。具体来说，React Fiber 使用了浏览器提供的 requestIdleCallback 或者 requestAnimationFrame API 来实现任务中断。

任务中断的实现流程：

任务分割： 当一个任务需要执行时间较长时，为了避免页面出现卡顿或者阻塞，React Fiber 将长任务分割为多个小任务单元。
时间片调度： React Fiber 使用了时间片（Time Slicing）的概念，将每个小任务单元限制在一个时间片内执行。时间片调度器会在浏览器的空闲时间内执行任务，每次只执行一小部分任务，然后让出执行权，等待下一次空闲时间继续执行任务。
空闲时段利用： React Fiber 利用浏览器的空闲时段来执行任务，这些空闲时段通常发生在浏览器完成绘制、事件处理和网络请求等操作之后。React Fiber 会将任务分配到这些空闲时段执行，从而避免了长任务对用户交互的影响。
优先级调度： 在任务执行过程中，React Fiber 使用了优先级调度的策略，根据任务的优先级动态调整任务的执行顺序。如果有更高优先级的任务需要执行，React Fiber 会立即中断当前任务的执行，转而执行更高优先级的任务。
异步回调函数： React Fiber 使用浏览器提供的 requestIdleCallback 或者 requestAnimationFrame API 来注册异步回调函数，这些回调函数会在浏览器空闲时段内执行，用于执行任务的调度和中断。

10. 调度示例代码

以下是一个简单的示例代码，演示了如何使用 requestIdleCallback 来实现任务调度和中断：

import React, { useState, useEffect } from 'react';

function TaskScheduler() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    function performTask(deadline) {
      while (deadline.timeRemaining() > 0 && count < 10) {
        // 模拟执行一个任务单元
        console.log('Performing task unit:', count);
        setCount(prevCount => prevCount + 1);
      }

      if (count < 10) {
        // 如果任务还未完成且还有剩余时间，继续在空闲时段执行任务
        requestIdleCallback(performTask);
      }
    }

    // 在组件挂载时开始执行任务调度
    requestIdleCallback(performTask);

    // 组件卸载时取消任务调度
    return () => cancelIdleCallback(performTask);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

export default TaskScheduler;

在这个示例中，TaskScheduler 组件会在组件挂载时开始执行任务调度。performTask 函数用于执行任务单元，它会在浏览器的空闲时段内执行任务，同时检查任务是否已经完成。如果任务还未完成且仍有剩余时间，就会继续在空闲时段内执行任务。当任务完成后，useEffect 钩子会监听 count 的变化，如果 count 小于 10，则会继续请求空闲时段执行下一个任务单元。最后，在组件卸载时，取消任务调度。

这个示例演示了如何利用浏览器的空闲时段来执行任务调度，并通过 requestIdleCallback 实现了任务的中断和异步执行。