2024 React 面试问答

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

React 和 Vue 都是目前非常受欢迎的前端 JavaScript 框架，各有其优势和劣势，选择哪一个通常取决于项目需求、团队熟悉度以及个人偏好。以下是 React 和 Vue 的一些对比点：

React:

优势:

更大的生态系统和社区：React 有更多的用户和贡献者，以及更多的第三方库和工具。
更灵活的架构：React 提供了灵活的方式来构建应用，不过这也意味着需要开发者做出更多架构决策。
Facebook 背景：由 Facebook 开发和维护，确保了其长期的稳定性和更新。
广泛的就业机会：由于其受欢迎程度高，掌握 React 技能的开发者通常有更多的就业选择。

劣势:

学习曲线：由于需要了解更多的概念（如 JSX、Hooks 等），React 的学习曲线可能比 Vue 稍陡峭。
更多的样板代码：尤其在使用类组件的时候，React 可能需要更多的样板代码。

Vue:

优势:

简洁的 API 和设计：Vue 的设计更简单直观，易于上手，特别是对于初学者。
更少的样板代码：Vue 通过其模板系统和简易的双向数据绑定减少了样板代码。
良好的文档：Vue 的官方文档在社区中被广泛认为是非常清晰和全面的，这有助于新手学习。
渐进式框架：Vue 被设计成可以逐步采用，你可以只用它的一部分功能，然后逐渐深入。

劣势:

社区和生态系统较小：尽管 Vue 的社区正在快速增长，但相比 React，它还是较小。
中国以外的市场认可度：虽然 Vue 在中国非常流行，但在北美等市场，React 和 Angular 的受欢迎程度更高。

在选择 React 还是 Vue 时，我会考虑以下因素：

项目需求：如果项目需要大量的灵活性和复杂度，或者与现有的 React 生态系统集成，我可能会选择 React。如果项目需要快速原型开发和较低的初始学习门槛，Vue 可能是更好的选择。
团队经验：选择团队成员更熟悉的框架通常会提高开发效率和减少成本。
社区和生态：根据项目中可能会用到的库和工具，社区和生态系统的大小和激活度可能会影响我的选择。
长期维护和更新：考虑到长期的项目维护和更新，选择一个有良好支持和更新记录的框架是重要的。
性能需求：虽然两者在性能上都很优秀，根据具体的性能需求和优化可能性，我可能会对这两个框架进行更深入的比较。

总的来说，没有绝对的“最好”，只有最适合当前情境的选择。

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

React Hooks 是在 React 16.8 版本中引入的一个重要特性，它们的诞生主要是为了解决以下几个问题：

复杂组件逻辑难以重用：在 Hooks 之前，如果你想在多个组件之间重用一些状态逻辑，你可能需要用到高阶组件（HOCs）或者渲染属性（render props）等模式。这些模式可以工作，但它们往往使得组件层次深且难以理解，也增加了代码的复杂度。
难以理解的类组件：类组件让许多开发者感到困惑，特别是对于初学者来说，需要理解 JavaScript 中的this关键字的工作方式，以及如何正确地绑定事件处理器方法。此外，类组件的生命周期方法经常让人头疼，尤其是当需要在不同生命周期方法中进行相同逻辑处理时。
副作用代码分散：在类组件中，相关的业务逻辑代码往往被分散在多个生命周期方法中（比如componentDidMount和componentDidUpdate中都需要进行数据的加载操作），这使得逻辑难以跟踪和维护。
复杂的组件状态逻辑：类组件中状态逻辑经常和 UI 逻辑紧密耦合在一起，这使得状态逻辑难以测试和重用。

React Hooks 的引入旨在解决这些问题，提供了一种更简单、更直观的方式来使用 React 的特性，而不需要编写类。Hooks 允许你在不编写类的情况下使用状态和其他的 React 特性。主要的 Hooks 有：

useState: 允许函数组件使用状态。
useEffect: 允许函数组件执行副作用操作（如数据获取、订阅更新等）。
useContext: 允许函数组件访问 React 的上下文系统。
useReducer: 提供更复杂的状态逻辑管理，与 Redux 类似。
useCallback 和 useMemo: 用于优化应用性能，避免不必要的渲染。

Hooks 的设计使得状态和相关逻辑可以更容易地打包在一起，从而更易于重用和测试，并且可以在不改变组件层次结构的情况下共享。这些特性使得开发者可以写出更简洁、更易于维护的代码。

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

虽然 React Hooks 提供了许多优势，它们的使用也引入了一些新的问题和挑战。这里是一些常见的问题，以及如何在编写时注意这些问题：

遵守 Hooks 规则：
- Hooks 必须在函数组件的最顶层调用，不得在循环、条件判断或嵌套函数中调用，以确保 Hooks 在每次组件渲染时都按相同的顺序被调用。
- 只能在 React 的函数组件或自定义 Hooks 中调用 Hooks。
为了避免违反这些规则，可以使用 ESLint 插件eslint-plugin-react-hooks来检查代码。
过度使用 useEffect：
- useEffect可以带来副作用管理上的便利，但过度使用它可能导致组件逻辑变得混乱。应当根据副作用的性质（比如 DOM 修改、数据订阅等）合理安排useEffect的使用。
复杂的依赖关系：
- useEffect和一些其他的 Hooks 允许你声明依赖项，以决定何时重新运行。不正确地声明依赖项可能导致无限循环或者过期的闭包。
- 确保列出所有使用到的外部变量作为依赖项，以此来避免这些问题。
性能问题：
- useState和useEffect在默认情况下在每次渲染后都会执行，这可能导致性能问题，特别是在渲染大型列表或复杂交互时。
- 使用useMemo和useCallback来优化渲染性能，避免不必要的计算和渲染。
自定义 Hooks 的管理：
- 自定义 Hooks 是一种强大的抽象方式，它可以让你提取组件逻辑。但如果没有合理的组织策略，可能导致复用代码变得困难。
- 合理组织和命名自定义 Hooks，保持它们的纯净和独立性，以便于管理和复用。
测试挑战：
- 使用 Hooks 的组件可能需要不同的测试策略，因为与类组件相比，它们可能没有实例方法也没有易于访问的内部状态。
- 使用适合 Hooks 的测试库（如 React Testing Library），它鼓励更多的行为驱动测试，而不是依赖组件内部实现细节。

通过理解 Hooks 的工作原理并遵循最佳实践，可以最大限度地减少这些问题。始终关注 React 的官方文档和社区，以获取关于 Hooks 使用的最新指南和技巧。

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

React 中的类组件和函数组件各有优缺点，随着 React 的发展，这些差异也在不断演变。以下是它们的一些对比：

类组件:

优势:

状态管理: 在引入 Hook 之前，类组件是唯一可以持有状态(state)的组件。
生命周期方法: 提供丰富的生命周期方法（如componentDidMount, componentDidUpdate等），允许执行复杂的操作。
可以使用this关键字: 访问或修改组件状态和属性。

劣势:

更复杂的语法: 类组件需要理解 JavaScript 中的this以及如何正确绑定事件处理函数。
更大的尺寸: 类组件通常比函数组件大小要大，可能导致更大的包体积。
性能开销: 类组件可能有轻微的性能开销，因为它们需要实例化。

函数组件:

优势:

简洁性: 语法更简洁，没有this的复杂性，容易编写和理解。
轻量级: 通常体积比类组件小，意味着更快的加载和解析。
函数式编程: 更容易使用函数式编程范式，代码可能更清晰和易于测试。
Hooks: 随着 React Hooks 的引入，函数组件几乎可以做到类组件的所有事情，并且能够更好地利用 React 的特性，如状态管理和副作用。

劣势:

生命周期管理: 在 Hooks 出现之前，函数组件没有直接对应于类组件生命周期方法的概念。
学习成本: 对于习惯于使用类的开发者来说，切换到函数组件加上 Hooks 的模式可能需要一段时间来适应。

在性能方面，函数组件通常被视为略优于类组件，尤其是在 React Hooks 引入后。以下是一些性能方面的考虑：

组件尺寸与加载时间：
函数组件通常更加轻量，因为它们不需要额外的方法和生命周期的处理，这可以减少文件的大小，使得加载时间更短。
实例化开销：
类组件需要通过new关键字来实例化，这个过程略微增加了运行时开销。函数组件避免了这种实例化开销，因为它们只是函数的调用。
内存占用：
函数组件通常会占用较少的内存，因为它们不需要额外的内存来存储类的实例。
渲染性能：
在实际的渲染性能方面，两者之间的差异通常可以忽略不计。React 团队努力确保性能差异最小化，因此从性能角度来说，选择哪一种类型的组件主要应该基于其他因素，如开发体验和代码的可维护性。
优化机制：
React 提供了一些优化机制，如React.memo和shouldComponentUpdate生命周期方法，它们都可以帮助避免不必要的渲染。对于函数组件，React.memo可以帮助你防止在 props 没有改变的情况下重新渲染。类似地，类组件可以通过实现shouldComponentUpdate方法来避免不必要的渲染。
Hooks 的使用：
虽然 Hooks 使函数组件变得更加强大，但是如果使用不当，也可能对性能产生负面影响。例如，如果不正确使用useEffect的依赖数组，可能导致额外的渲染或副作用执行。

总的来说，在现代 React 应用程序中，函数组件与类组件在性能上的差异非常微小，很难成为选择组件类型的决定性因素。对于大多数应用来说，其他因素，如开发体验、代码的清晰性和可维护性，以及与团队现有代码库的一致性，可能是更重要的考虑因素。选择函数组件还是类组件，最好根据团队习惯、项目需求和个人偏好来决定。

随着 React Hooks 的引入，函数组件的能力得到了极大的增强，使得之前类组件独有的功能（如状态管理和生命周期访问）现在也能在函数组件中实现。这导致了许多开发者和团队逐渐转向使用函数组件作为首选，尤其是对于新项目和新组件。

选择类组件还是函数组件通常取决于个人偏好、项目需求和团队规范。随着时间的推移和 React 的发展，函数组件加 Hooks 的模式正在成为社区中的主流写法。

5. 说一下 hooks 的闭包问题

在使用 React Hooks 时，尤其是useState和useEffect，我们经常会遇到闭包相关的问题。闭包问题通常发生在一个函数组件内部，当这个函数组件利用了 hooks 去捕获了某个变量的状态，并且在异步操作（比如 setTimeout、Promise 等）或者在回调函数中引用了这个状态时。

问题描述：

Hooks 中的闭包问题通常是由于函数组件的局部变量在创建时捕获了特定的作用域状态，而当这个函数组件重新渲染时，这些捕获的状态可能已经过时。这就导致了函数组件内部的事件处理器或者效果（effects）引用的状态不是最新的状态。

例如，假设你有一个定时器，它引用了一个通过useState创建的状态变量：

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

  useEffect(() => {
   
   
    const intervalId = setInterval(() => {
   
   
      // 这里的count值是这个闭包创建时的值，而不是最新的count值
      console.log(count);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // 空依赖数组意味着effect只会在挂载时运行

  return (
    <div>
      <p>You clicked {
   
   count} times</p>
      <button onClick={
   
   () => setCount(count + 1)}>Click me</button>
    </div>
  );
}

上面的代码中，setInterval的回调函数引用的count值是useEffect运行时的count的值，而当你点击按钮更新count时，定时器中的闭包并不会获取到更新后的count值。

解决方案：

解决 Hooks 闭包问题的常用方法包括：

使用最新的状态
- 通过更新状态的函数形式来确保总是使用最新的状态：

setCount((currentCount) => currentCount + 1);

使用引用（useRef）
- 使用useRef来保持对最新值的引用：

const countRef = useRef(count);
countRef.current = count;

useEffect(() => {
   
   
  const intervalId = setInterval(() => {
   
   
    // 使用countRef.current总是获取到最新的count值
    console.log(countRef.current);
  }, 1000);

  return () => clearInterval(intervalId);
}, []);

在useEffect中包含所有依赖项
- 通过在useEffect的依赖数组中包含所有相关的依赖项，确保在依赖项更新时重新运行 effect：

useEffect(() => {
   
   
  // ...
}, [count]); // count包含在依赖数组中，这样每次count更新时都会重新设置定时器

使用函数式更新
- 对于设置状态的函数，传递一个函数而不是具体的值，这个函数接受前一个状态值作为参数，返回新的状态值。

setCount((prevCount) => prevCount + 1);

理解和利用闭包是高级 JavaScript 和 React 开发的关键。通过合适的解决方案，可以确保我们的 Hooks 正确地引用和更新状态，避免产生难以追踪的 bug。

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

在 React 中，useState和useRef是专门设计用来在函数组件多次渲染之间保持状态和引用的 Hooks。它们之所以能够保持值不被清除，是因为 React 底层的工作机制保证了这一点：

1. `useState`

useState Hook 让函数组件能够在渲染之间保持并更新状态。它接收初始状态作为参数，并返回一个数组，其中包含当前状态值和一个允许你更新该状态的函数。当你使用设置状态的函数更新状态时，React 会重新渲染组件，并保持该状态在重新渲染之间的连续性。

React 内部维护了一个状态数组，对于每个组件实例，这个数组中的每个状态

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

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

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

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

5. 说一下 hooks 的闭包问题

问题描述：

解决方案：

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

1. useState

相关推荐

最近更新

热门阅读

1. `useState`