我最常问的 React 面试问题

2025-06-07

我最常问的 React 面试问题

本文总结了我会问应聘者以及我在面试中经常被问到的 React 面试问题列表。

目录

1.什么是 React？

React是一个“用于构建用户界面的 JavaScript 库”，由 Facebook 于 2011 年开发。

它是 MVC（模型 - 视图 - 控制器）中的 V，因此它是一个开源 UI 库，而不是一个框架。

2.React 有什么优点？

  • 性能良好：得益于 VDOM，参见#17。
  • 易于学习：只需掌握基本的 JavaScript 知识即可开始构建应用程序。像 Angular 这样的框架需要更多其他技术和模式的知识，例如 RxJS、TypeScript 和依赖注入。
  • 单向数据流：这种流也称为“父到子”或“从上到下”，可防止错误并方便调试。
  • 可重复使用的组件：只需很少的更改或无需更改，即可在代码的其他部分甚至不同的项目中重复使用 React 组件。
  • 庞大的社区：社区提供了大量可用于构建 React 应用程序的库。
  • 它在开发人员中非常受欢迎。

3.React 有什么缺点？

  • 由于 React 仅提供了 MVC 模型的视图部分，因此你的项目很大程度上还会依赖其他技术。因此，每个 React 项目可能看起来都大相径庭。
  • 有些人认为 JSX 太难掌握、太复杂。
  • React 及其库的文档通常很差。

4.什么是 JSX？

JSX（JavaScript XML）允许我们在 JavaScript 中编写 HTML。官方文档将其描述为“JavaScript 的语法扩展”。

React 建议使用 JSX，但也可以完全不使用 JSX 来创建应用程序。

一个简单的 JSX 示例：

const element = <h1>Hello, world!</h1>;
Enter fullscreen mode Exit fullscreen mode

5.组件之间如何传递数据？

  1. 使用 props 将数据从父级传递到子级。
  2. 使用回调将数据从子级传递到父级。
  3. 使用以下任一方法在兄弟节点之间传递数据：

6. 函数式组件和类组件有什么区别？

Hooks是在 React 16.8 中引入的。在之前的版本中，函数式组件被称为无状态组件，不提供与类组件相同的功能（例如访问状态）。Hooks 使函数式组件能够拥有与类组件相同的功能。目前没有计划从 React 中移除类组件。

让我们来看看它们之间的区别：

声明 & 属性

功能组件

函数组件是 JavaScript 函数，因此可以使用箭头函数或function关键字声明。Props 只是函数参数，可以在 JSX 中直接使用：

const Card = (props) => {
 return(
    <h2>Title: {props.title}</h2>
 )
}

function Card(props){
 return(
    <h2>Title: {props.title}</h2>
 )
}
Enter fullscreen mode Exit fullscreen mode

类组件

类组件使用 ES6 关键字声明class。Props 需要使用以下this关键字访问：

class Card extends React.Component{
 constructor(props){
   super(props);
 }

 render(){
   return(
    <h2>Title: {this.props.title}</h2>
   )
 }
}
Enter fullscreen mode Exit fullscreen mode

处理状态

功能组件

在功能组件中，我们需要使用useState钩子来处理状态：

const Counter = (props) => {
    const [counter, setCounter] = useState(0);

    const increment = () => {
        setCounter(++counter);
    }

    return (
        <div>
            <p>Count: {counter}</p>
            <button onClick={increment}>Increment Counter</button>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

类组件

在类组件内部使用 React Hooks 是不可能的，因此类组件中的状态处理方式有所不同：

class Counter extends React.Component {
    constructor(props){
        super(props);
        this.state = {counter : 0};
        this.increment = this.increment.bind(this);
    }

    increment {
        this.setState((prevState) => {
            return {counter: prevState.counter++};
        });
    }

    render() {
    return (
            <div>
            <p>Count: {this.state.counter}</p>
            <button onClick={this.increment}>Increment Counter</button>
        </div>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

7.什么是虚拟DOM？

虚拟DOM (VDOM)是一个轻量级的 JavaScript 对象，它包含真实 DOM 的副本。

真实 DOM 虚拟 DOM
缓慢且昂贵的 DOM 操作 快速且廉价的 DOM 操作
允许从 HTML 直接更新 不能直接用于更新 HTML
浪费太多内存 更少的内存消耗

8.Shadow DOM 和 Virtual DOM 一样吗？

不，它们是不同的。

Shadow DOM是一种浏览器技术，主要用于在 Web 组件中限定变量和 CSS 的范围。

虚拟 DOM 是 JavaScript 库在浏览器 API 之上实现的概念。

9.什么是“React Fiber”？

Fiber 是 React 16 中的新协调引擎。

其主要功能是增量渲染：能够将渲染工作分成几块并将其分散到多个帧上。

阅读更多。

10.state 和 props 有什么不同？

props 和 state 都是普通的 JavaScript 对象。

Props（“properties”的缩写）是由父​​组件传递给组件的任意输入的对象。

状态是由组件初始化和管理的变量，并且会在该组件的特定实例的生命周期内发生变化。

Kent C. Dodds 的这篇文章提供了更详细的解释。

11.受控组件和非受控组件有什么区别？

受控 React 组件中输入元素的值由 React 控制。

不受控制的 React 组件中输入元素的值由 DOM 控制。

12. React 中有哪些不同的生命周期方法？

React 类组件提供以下生命周期方法：

  • componentDidMount()：在组件输出呈现到 DOM 后运行。
  • componentDidUpdate()：更新后立即运行。
  • componentWillUnmount()：组件从 DOM 卸载后运行，用于清理内存空间。

还存在一些其他很少使用和遗留的生命周期方法。

在函数式组件中，钩子用于替代上述生命周期方法。useEffect例如，Effect Hook 增加了执行副作用的能力，并提供与 、 和 相同componentDidMount的componentDidUpdate功能componentWillUnmount。

13. 如何提高 React 应用程序的性能？

  • 使用React.PureComponent，它是一个类似的基类，但如果它的功能在相同的 props 和状态下呈现相同的结果，则React.Component在某些情况下它可以提高性能。render()
  • 使用useMemo Hook来记忆每次渲染时执行昂贵计算的函数。只有当传递给 Hook 的依赖项之一发生更改时，它才会重新计算已记忆的值。
  • 状态托管是指将状态尽可能地移动到需要的位置。一些 React 应用的父组件中存储了大量不必要的状态，这不仅增加了代码维护难度，还会导致大量不必要的重新渲染。本文将详细介绍状态托管。
  • 延迟加载组件，以减少应用程序的加载时间。React Suspense可用于延迟加载组件。

14. React 中的键是什么？

React 需要键来识别哪些元素被更改、添加或删除。数组中的每个元素都需要一个键来提供稳定的标识。

如果列表项的顺序可能发生变化，则不建议使用索引作为键，因为这会对性能产生负面影响，并可能导致状态问题。如果没有为列表项指定显式键，React 将使用索引作为键。

请参阅 Robin Pokorny 的文章，深入了解使用索引作为键的负面影响。如果您有兴趣了解更多信息，这里还有另一篇深入解释，说明为什么需要键。

15.什么是高阶组件？

高阶组件（HOC）是一个接受组件并返回新组件的函数。

它们是 React 中用于复用组件逻辑的高级技术，本身并不属于 React API。它们是一种源于 React 组合特性的模式：

const EnhancedComponent = higherOrderComponent(WrappedComponent);
Enter fullscreen mode Exit fullscreen mode

组件将 props 转换为 UI，而高阶组件则将一个组件转换为另一个组件。

16.什么是错误边界？

React 16 引入了“错误边界”的新概念。

错误边界是 React 组件，它能够捕获子组件树中任意位置的 JavaScript 错误，记录这些错误，并显示回退 UI 来替代崩溃的组件树。错误边界会在渲染过程中、生命周期方法中以及其下方整个组件树的构造函数中捕获错误。

17.为什么要引入 Hooks？

Hooks 解决了 React 中各种看似不相关的问题，这些问题是 Facebook 在五年内编写和维护数万个组件时遇到的：

  • 钩子允许您重用状态逻辑，而无需更改组件层次结构。
  • Hooks 允许您根据相关部分（例如设置订阅或获取数据）将一个组件拆分为更小的函数。
  • Hooks 让您无需使用类即可使用更多 React 功能。
  • 它消除了处理this类组件内部关键字的复杂性。

阅读更多

18. useEffect hook 的用途是什么？

Effect钩子允许我们在函数式组件中执行副作用。它帮助我们避免在类组件的不同生命周期方法中编写冗余代码，并有助于对相关代码进行分组。

19. React 中的合成事件是什么？

SyntheticEvent是一个跨浏览器的封装器，封装了浏览器原生事件。它拥有与浏览器原生事件相同的 API，包括stopPropagation()`preventDefault()`，但这些事件在所有浏览器中的工作方式完全相同。

20.refs 有什么用？

Ref是一个特殊属性，可以附加到任何组件。它可以是由 、回调函数或字符串（在旧版 API 中）创建的对象React.createRef()。

要直接访问 DOM 元素或组件实例，可以使用 ref 属性作为回调函数。该函数接收底层 DOM 元素或类实例（取决于元素的类型）作为参数。

大多数情况下，应谨慎使用 ref。

结论

希望这份 React 面试题清单能帮助你获得下一个 React 职位。如果你知道其他重要的 React 面试题，欢迎留言。

如果您喜欢这篇文章，请在Twitter上关注我，以便收到有关我的新博客文章和更多内容的通知。

如果您正在寻找更多面试问题，您应该查看这份前 500 个 React 面试问题和答案列表。

文章来源：https://dev.to/mokkaapps/my-top-react-interview-questions-5hfb
Devto 翻译
PREV
NestJS——轻松开发全栈 TypeScript Web 应用程序的缺失部分
NEXT
我最常问的 Angular 面试问题