前端面试题大汇总：React 篇

最新推荐文章于 2025-10-10 15:44:51 发布

原创

最新推荐文章于 2025-10-10 15:44:51 发布 · 1.7k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js #前端框架

基础知识

1. 什么是 React？它的主要特点是什么？

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它主要用于构建单页应用程序（SPA）和复杂的用户界面。React 的主要特点包括：

组件化：React 将 UI 分解成独立的、可重用的组件。每个组件都有自己的逻辑和控制。
虚拟 DOM：React 使用虚拟 DOM 来提高性能。虚拟 DOM 是一个内存中的树结构，React 会先在虚拟 DOM 中进行操作，然后批量更新真实 DOM。
声明式编程：React 采用声明式编程风格，开发者只需描述 UI 应该是什么样的，React 会负责处理 UI 的变化。
JSX：React 使用 JSX（JavaScript XML）语法，允许在 JavaScript 中编写类似 HTML 的标记。
生态系统丰富：React 拥有丰富的生态系统，包括路由器（React Router）、状态管理库（Redux、MobX）等。

2. 什么是 JSX？它有什么优点？

JSX 是一种语法扩展，允许在 JavaScript 中编写类似 HTML 的标记。JSX 最终会被编译成普通的 JavaScript 代码。

优点：

可读性强：JSX 使得模板代码更加直观和易读，特别是对于复杂的 UI 结构。
类型检查：JSX 可以在编译时进行类型检查，减少运行时错误。
表达式支持：可以在 JSX 中嵌入 JavaScript 表达式，使得动态生成 UI 变得更加方便。
工具支持：现代开发工具（如 Babel）可以将 JSX 编译成兼容所有浏览器的 JavaScript 代码。

3. 什么是虚拟 DOM？它是如何工作的？

虚拟 DOM 是一个轻量级的内存中的 DOM 树表示。React 使用虚拟 DOM 来提高性能，避免频繁的操作真实 DOM。

工作原理：

创建虚拟 DOM：React 在内存中创建一个虚拟 DOM 树。
Diff 算法：当状态改变时，React 会比较新的虚拟 DOM 和旧的虚拟 DOM，找出差异（即最小的变更集合）。
批量更新：React 将这些差异批量应用到真实 DOM，减少 DOM 操作次数，提高性能。

4. React 中的单向数据流是什么意思？

单向数据流 是 React 的核心设计理念之一。在单向数据流中，数据只能从父组件流向子组件，不能反向流动。这种方式使得数据流更加清晰和可控。

特点：

数据一致性：单向数据流确保了数据的一致性，避免了数据的混乱和不可预测的变化。
易于调试：数据流的单一方向使得调试更加容易，可以更容易地追踪数据的变化。
可预测性：单向数据流使得应用的状态变化更加可预测，便于维护和扩展。

5. 什么是 Props 和 State？它们的区别是什么？

Props（属性）：

定义：Props 是组件之间传递数据的一种方式。父组件可以通过 props 向子组件传递数据。
不可变：Props 是只读的，子组件不能修改传入的 props。
用途：用于配置组件的行为和外观。

State（状态）：

定义：State 是组件内部的状态，用于存储组件的数据。
可变：State 是可变的，可以通过 setState 方法更新。
用途：用于管理组件的内部状态，控制组件的行为和渲染。

区别：

来源：Props 来自父组件，State 是组件自身的状态。
可变性：Props 是只读的，State 是可变的。
用途：Props 用于配置组件，State 用于管理组件的内部状态。

6. 如何在 React 中创建一个组件？

函数组件：

const MyComponent = (props) => {
   
   
  return <div>Hello, {
   
   props.name}!</div>;
};

类组件：

class MyComponent extends React.Component {
   
   
  render() {
   
   
    return <div>Hello, {
   
   this.props.name}!</div>;
  }
}

7. 什么是函数组件和类组件？它们有什么区别？

函数组件：

定义：函数组件是一个简单的 JavaScript 函数，接收 props 作为参数，返回 JSX。
优点：代码更简洁，性能更好（因为没有类的开销）。
限制：早期版本的函数组件不支持生命周期方法和状态管理，但随着 Hooks 的引入，这些限制已经被解除。

类组件：

定义：类组件是继承自 React.Component 的 ES6 类，可以定义生命周期方法和管理状态。
优点：支持生命周期方法和状态管理，功能更强大。
缺点：代码相对复杂，性能略逊于函数组件。

8. 什么是纯组件？为什么要使用纯组件？

纯组件：

定义：纯组件是一种特殊的组件，它通过 React.memo（函数组件）或 PureComponent（类组件）来实现。纯组件会在 props 或 state 发生变化时进行浅比较，如果前后值相同，则跳过重新渲染。
优点：
- 性能优化：减少不必要的重新渲染，提高应用性能。
- 简化逻辑：开发者不需要手动实现 shouldComponentUpdate 方法来优化性能。

使用场景：

静态数据：组件的 props 和 state 不经常变化。
复杂组件：组件内部逻辑复杂，重新渲染开销大。

9. 什么是 React Context API？它解决了什么问题？

React Context API：

定义：Context API 是 React 提供的一种在组件树中传递数据的机制，无需通过 props 逐层传递。
使用：
- 创建 Context：使用 React.createContext 创建一个 Context 对象。
- 提供 Context：使用 Context.Provider 组件将数据传递给子组件。
- 消费 Context：使用 Context.Consumer 组件或 useContext Hook 在子组件中访问数据。

组件

1. 什么是受控组件和非受控组件？它们的区别是什么？

受控组件（Controlled Components） ：

定义：受控组件是指那些其输入值由 React 的状态（state）控制的表单组件。每次用户输入时，都会触发一个事件处理器，更新组件的状态，从而更新表单的值。
特点：
- 状态管理：表单的值由 React 状态管理。
- 事件处理：每次用户输入时，都会触发事件处理器。

示例：

import React, {
     
      useState } from 'react';

const ControlledForm = () => {
     
     
  const [value, setValue] = useState('');

  const handleChange = (e) => {
     
     
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
     
     
    e.preventDefault();
    console.log('Form submitted with value:', value);
  };

  return (
    <form onSubmit={
     
     handleSubmit}>
      <input type="text" value={
     
     value} onChange={
     
     handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

非受控组件（Uncontrolled Components） ：

定义：非受控组件是指那些其输入值不由 React 状态管理的表单组件。相反，它们依赖于 DOM API 来获取表单的值。
特点：
- DOM API：通过 ref 获取表单的值。
- 初始值：可以通过 defaultValue 或 defaultChecked 属性设置初始值。

示例：

import React, {
     
      useRef } from 'react';

const UncontrolledForm = () => {
     
     
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
     
     
    e.preventDefault();
    console.log('Form submitted with value:', inputRef.current.value);
  };

  return (
    <form onSubmit={
     
     handleSubmit}>
      <input type="text" ref={
     
     inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

2. 如何在 React 中实现条件渲染？

条件渲染 是指根据条件决定是否渲染某个组件或元素。React 提供了多种方式来实现条件渲染：

三元运算符：

const App = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
};

逻辑与运算符：

const App = ({ user }) => {
  return (
    <div>
      {user && <h1>Welcome, {user.name}!</h1>}
    </div>
  );
};

使用 if 语句：

const App = ({ items }) => {
  if (items.length === 0) {
    return <h1>No items found.</h1>;
  }

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

3. 什么是高阶组件（HOC）？请给出一个实际的例子。

高阶组件（Higher-Order Component, HOC） 是一个函数，它接受一个组件并返回一个新的组件。HOC 用于复用组件逻辑，增强组件的功能。

示例：假设我们有一个 withLogging HOC，用于在组件渲染时记录日志。

import React from 'react';

// 高阶组件
const withLogging = (WrappedComponent) => {
   
   
  return class extends React.Component {
   
   
    componentDidMount() {
   
   
      console.log(`Component ${
     
     WrappedComponent.name} mounted`);
    }

    componentWillUnmount() {
   
   
      console.log(`Component ${
     
     WrappedComponent.name} will unmount`);
    }

    render() {
   
   
      return <WrappedComponent {
   
   ...this.props} />;
    }
  };
};

// 被包裹的组件
const MyComponent = (props) => {
   
   
  return <h1>Hello, {
   
   props.name}!</h1>;
};

// 使用 HOC
const MyComponentWithLogging = withLogging(MyComponent);

export default MyComponentWithLogging;

4. 什么是 Render Props？它有什么优点？

Render Props 是一种在 React 中共享代码的技术，通过在组件中传递一个函数作为 prop 来实现。这个函数负责返回 JSX，从而实现在不同组件间共享逻辑。

优点：

复用逻辑：可以在多个组件中复用相同的逻辑。
灵活性：可以自由地决定如何渲染组件，而不受限于预定义的结构。

示例：假设我们有一个 MouseTracker 组件，用于跟踪鼠标位置。

import React from 'react';

// 跟踪鼠标位置的组件
class MouseTracker extends React.Component {
   
   
  constructor(props) {
   
   
    super(props);
    this.state = {
   
    x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
   
   
    this.setState({
   
   
      x: event.clientX,
      y: event.clientY
    });
  };

  render() {
   
   
    return (
      <div style={
   
   {
   
    height: '100vh' }} onMouseMove={
   
   this.handleMouseMove}>
        {
   
   this.props.render(this.state)}
      </div>
    );
  }
}

// 使用 Render Props 的组件
const App = () => {
   
   
  return (
    <MouseTracker render={
   
   ({
    
     x, y }) => (
      <h1>The mouse position is ({
   
   x}, {
   
   y})</h1>
    )} />
  );
};

export default App;

5. 如何在 React 中实现列表渲染？

列表渲染 是指根据数组数据动态生成多个组件或元素。React 提供了 map 方法来实现这一功能。

示例：假设我们有一个 items 数组，需要渲染成一个列表。

import React from 'react';

const App = <

最低0.47元/天解锁文章