2018 年你应该知道的 26 个 React + Redux 面试问题

2025-05-27

2018 年你应该知道的 26 个 React + Redux 面试问题

2018 年 26 个 React 面试问题及答案
“首席 JavaScript 开发人员（React JS）——年薪 13 万澳元”。这是澳大利亚悉尼经验丰富的全栈 React 开发人员的典型职位描述。快来学习FullStack.Cafe提供的最常见的 React 和 Redux 面试问答，助您在下一次全栈面试中脱颖而出。

🔴 最初发表于FullStack.Cafe - Kill Your Tech & Coding Interview

问题1：什么是React？

主题：React
难度：⭐

React 是由 Facebook 创建的开源 JavaScript 库，用于在 Web 和移动应用程序中构建复杂的交互式 UI。React 的核心目的是构建 UI 组件；它通常被称为“MVC”架构中的“V”（视图）。

🔗来源： codementor.io

Q2：什么是Redux？

主题：Redux
难度：⭐

Redux是一个基于 Flux 设计模式的 JavaScript 应用可预测状态容器。Redux 可以与 ReactJS 或任何其他视图库一起使用。它非常小巧（约 2kB）并且没有任何依赖项。

🔗来源： github.com/sudheerj

Q3：什么是虚拟DOM？

主题：React
难度：⭐

虚拟 DOM (VDOM)是真实 DOM 的内存表示。UI 的表示保存在内存中，并与“真实” DOM 同步。这是在渲染函数被调用和元素显示在屏幕上之间发生的一个步骤。整个过程称为协调 (reconciliation)。

🔗来源： github.com/sudheerj

问题4：什么是Flux？

主题：Redux
难度：⭐

Flux是一种应用程序设计范式，用于替代更传统的 MVC 模式。它不是一个框架或库，而是一种新的架构，是对 React 和单向数据流概念的补充。Facebook 在使用 React 时内部使用了这种模式。调度器、存储和视图组件之间具有不同输入和输出的工作流程如下：

🔗来源： github.com/sudheerj

Q5：ReactJS 有什么优点？

主题：React
难度：⭐

以下是 ReactJS 的优点：

  1. 使用虚拟 DOM 提高应用程序的性能
  2. JSX 使代码易于阅读和编写
  3. 它在客户端和服务器端都呈现
  4. 由于它只是一个视图库，因此易于与其他框架（Angular、BackboneJS）集成
  5. 易于编写 UI 测试用例并与 JEST 等工具集成。

🔗来源： github.com/sudheerj

Q6：ReactJS 的主要特性是什么？

主题：React
难度：⭐

ReactJS 的主要特性如下，

  • 考虑到 RealDOM 操作成本高昂，它使用VirtualDOM而不是 RealDOM。
  • 支持服务器端渲染
  • 遵循单向数据流或数据绑定
  • 使用可重用/可组合的UI 组件来开发视图

🔗来源： https://github.com/sudheerj

Q7：展示组件和容器组件有什么区别？

主题：React
难度：⭐⭐

  • 展示组件关注的是事物的外观。它们通常通过 props 接收数据和回调。这些组件很少有自己的状态，但如果有，通常关注的是 UI 状态，而不是数据状态。

  • 容器组件更关注事物的运作方式。这些组件向展示组件或其他容器组件提供数据和行为。它们调用 Flux 操作，并将其作为回调提供给展示组件。由于它们充当数据源，因此通常也是有状态的。

🔗来源： github.com/Pau1fitz

Q8：描述一下 React 中如何处理事件。

主题：React
难度：⭐⭐

为了解决跨浏览器兼容性问题，React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 针对浏览器原生事件的跨浏览器包装器。这些合成事件具有与您习惯的原生事件相同的接口，但它们在所有浏览器中的工作方式完全相同。

稍微有点意思的是，React 实际上并不会将事件附加到子节点本身。React 会使用单个事件监听器来监听顶层的所有事件。这有利于提高性能，也意味着 React 在更新 DOM 时无需担心跟踪事件监听器。

🔗资料来源： tylermcginnis.com

Q9：ReactJS 中的状态是什么？

主题：React
难度：⭐⭐

组件的状态是一个对象，它保存着一些可能在组件生命周期内发生变化的信息。我们应该始终尝试使状态尽可能简单，并尽量减少有状态组件的数量。

让我们创建具有消息状态的用户组件，

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

       this.state = {
          message: "Welcome to React world",
       }
    }
    render() {
       return (
          <div>
             <h1>{this.state.message}</h1>
          </div>
       );
    }
 }
Enter fullscreen mode Exit fullscreen mode

🔗来源： https://github.com/sudheerj

Q10：state 和 props 有什么区别？

主题：React
难度：⭐⭐

props和state都是普通的 JavaScript 对象。虽然它们都包含影响渲染输出的信息，但它们在组件方面的功能有所不同。例如，

  • Props 以类似于函数参数的方式传递给组件
  • 状态在组件内进行管理，类似于在函数内声明的变量。

🔗来源： https://github.com/sudheerj

Q11：ReactJS 有什么局限性？

主题：React
难度：⭐⭐

以下是限制列表：

  1. React 只是一个视图库，而不是一个完整的框架
  2. 对于刚接触 Web 开发的初学者来说，有一个学习曲线。
  3. 将 React.js 集成到传统 MVC 框架需要一些额外的配置
  4. 代码复杂性随着内联模板和 JSX 而增加。
  5. 过多的小组件导致过度设计或样板化

🔗来源： github.com/sudheerj

Q12：React 中的“元素”和“组件”有什么区别？

主题：React
难度：⭐⭐

简单来说，React 元素描述了你希望在屏幕上看到的内容。更进一步来说，React 元素是一些 UI 的对象表示。

React 组件是一个函数或类，它可以选择性地接受输入并返回一个 React 元素（通常通过 JSX 转换为 createElement 调用）。

🔗来源： medium.freecodecamp.org/

Q13：React 与 AngularJS（1.x）有何不同？

主题：React
难度：⭐⭐

例如，AngularJS（1.x）通过扩展 HTML 标记并在运行时注入各种结构（例如指令、控制器、服务）来构建应用程序。因此，AngularJS 对应用程序的整体架构非常执着——这些抽象在某些情况下确实有用，但它们是以牺牲灵活性为代价的。

相比之下，React 专注于组件的创建，对应用程序的架构几乎没有任何意见。这使得开发人员在选择他们认为“最佳”的架构时拥有极大的灵活性——尽管它也将选择（或构建）这些部分的责任放在了开发人员身上。

🔗来源： codementor.io

Q14：Redux 与 Flux 相比有哪些缺点？

主题：Redux
难度：⭐⭐⭐

与其说是缺点，不如说是使用 Redux 相比 Flux 有一些缺点。具体如下：

  1. 你需要学习如何避免状态突变： Flux 对数据突变没有意见，但 Redux 不喜欢状态突变，而且许多 Redux 的补充包都假设你永远不会改变状态。你可以使用仅限开发的包（例如 redux-immutable-state-invariant、Immutable.js）来强制执行此操作，或者让你的团队编写不可突变的代码。
  2. 你必须谨慎选择你的包：虽然 Flux 明确不打算解决诸如撤销/重做、持久化或表单之类的问题，但 Redux 拥有中间件和 store 增强器等扩展点，并且它已经催生了一个年轻但丰富的生态系统。这意味着大多数包都是新想法，尚未达到临界使用量。
  3. 目前还没有很好的 Flow 集成： Flux 目前允许您进行非常令人印象深刻的静态类型检查，但 Redux 尚不支持。

🔗来源： github.com/sudheerj

Q15：ReactJS 中的错误边界是什么（16）？

主题：React
难度：⭐⭐⭐

错误边界是 React 组件，它捕获其子组件树中任何位置的 JavaScript 错误，记录这些错误，并显示回退 UI 而不是崩溃的组件树。

如果类组件定义了一个名为“componentDidCatch(error, info)

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}
Enter fullscreen mode Exit fullscreen mode

之后将其用作常规组件

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
Enter fullscreen mode Exit fullscreen mode

🔗来源： github.com/sudheerj

Q16：为什么 ReactJS 使用 className 而不是 class 属性？

主题：React
难度：⭐⭐⭐

classclassName是 JavaScript 中的关键字，而 JSX 是 JavaScript 的扩展。这就是 React 使用class 而不是 class 的主要原因。

render() {
  return <span className="menu navigation-menu">Menu</span>
}
Enter fullscreen mode Exit fullscreen mode

🔗来源： github.com/sudheerj

Q17：如何在 React 组件外部访问 Redux 存储？

主题：Redux
难度：⭐⭐⭐

是的。你只需要从创建它的模块中导出 store 即可createStore。此外，它不应该污染全局 window 对象。

store = createStore(myReducer);
export default store;
Enter fullscreen mode Exit fullscreen mode

🔗来源： github.com/sudheerj

Q18：您能告诉我有关 JSX 的什么信息？

主题：React
难度：⭐⭐⭐

Facebook 首次向世界发布 React 时，还引入了一种名为 JSX 的新 JavaScript 方言，它将原始 HTML 模板嵌入到 JavaScript 代码中。JSX 代码本身无法被浏览器读取；必须使用 Babel 和 webpack 等工具将其转换为传统的 JavaScript。虽然许多开发者最初可能会对此产生本能反应，但 JSX（与 ES2015 并驾齐驱）已成为定义 React 组件的主流方法。

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

🔗来源： codementor.io

Q19：为什么我们不应该直接更新状态？

主题：React
难度：⭐⭐⭐

如果您尝试直接更新状态，那么它将不会重新渲染组件。

    //Wrong
    This.state.message =”Hello world”;
Enter fullscreen mode Exit fullscreen mode

请使用setState()方法。它会安排组件状态对象的更新。当状态发生变化时，组件会通过重新渲染来响应

    //Correct
    This.setState({message: ‘Hello World’});
Enter fullscreen mode Exit fullscreen mode

注意：唯一可以分配状态的地方是构造函数。

🔗来源： https://github.com/sudheerj

Q20：ReactJS 组件生命周期有哪些不同阶段？

主题：React
难度：⭐⭐⭐

React 组件的生命周期分为四个不同的阶段：

  1. 初始化：在此阶段，React 组件准备设置初始状态和默认道具。
  2. 挂载： React 组件已准备好挂载到浏览器 DOM 中。此阶段涵盖了componentWillMount和componentDidMount生命周期方法。
  3. 更新：在此阶段，组件通过两种方式进行更新：发送新的 props 和更新 state。此阶段涵盖shouldComponentUpdate、componentWillUpdate 和 componentDidUpdate生命周期方法。
  4. 卸载：在最后阶段，组件不再需要，并从浏览器 DOM 中卸载。此阶段包含componentWillUnmount生命周期方法。

🔗来源： github.com/sudheerj

Q21：描述一下 Flux 与 MVC？

主题：React
难度：⭐⭐⭐⭐

传统的 MVC 模式可以很好地分离数据（模型）、UI（视图）和逻辑（控制器）的关注点，但 MVC 架构经常遇到两个主要问题：

  • 数据流定义不明确：跨视图发生的级联更新通常会导致事件网络混乱，难以调试。

  • 缺乏数据完整性：模型数据可能从任何地方发生变化，从而导致整个 UI 产生不可预测的结果。

有了 Flux 模式，复杂的 UI 不再受级联更新的影响；任何给定的 React 组件都能够根据 store 提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来确保数据完整性。

🔗来源： codementor.io

Q22：为什么要在 React 组件中使用 forceUpdate？

主题：React
难度：⭐⭐⭐⭐

如果 React 未检测到需要更新 UI 的情况，则强制重新渲染。通常情况下，无需调用此方法。

🔗来源： github.com/WebPredict

Q23：这段代码有什么问题？

主题：React
难度：⭐⭐⭐⭐

问题：

这段代码有什么问题？

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})
Enter fullscreen mode Exit fullscreen mode

回答：

这没什么问题。虽然它很少使用，也不太为人所知，但你也可以传递一个函数，setState接收先前的状态和 props 并返回一个新的状态，就像我们上面做的那样。这不仅没有问题，而且如果你需要根据先前的状态设置状态，我们强烈推荐你这样做。

🔗资料来源： tylermcginnis.com

Q24：受控组件和非受控组件有什么区别？

主题：React
难度：⭐⭐⭐⭐

  • 受控组件是React 控制的组件，也是表单数据的唯一真实来源。
  • 非受控组件是指您的表单数据由 DOM 处理，而不是由 React 组件内部处理。

虽然非受控组件通常更容易实现，因为您只需使用 refs 从 DOM 中获取值，但通常建议您优先使用受控组件。主要原因是受控组件支持即时字段验证，允许您有条件地禁用/启用按钮，强制输入格式，并且更符合“React 风格”。

🔗来源： github.com/Pau1fitz

Q25：解释 Flux 和 AngularJS（1.x）方法之间的一些区别

主题：React
难度：⭐⭐⭐⭐⭐

AngularJS 中的 UI 组件通常依赖于一些内部机制$scope来存储数据。这些数据可以直接从 UI 组件内部或任何有访问权限的地方进行修改$scope——这对于依赖这些数据的组件或整个应用程序的任何部分来说都是一种危险的情况。

相比之下，Flux 模式鼓励使用不可变数据。由于存储是所有数据的中心权威机构，因此任何对数据的修改都必须在存储内部进行。数据污染的风险大大降低。

🔗来源： codementor.io

Q26：React 中的副作用是什么意思？请举例说明。

主题：React
难度：⭐⭐⭐⭐⭐

“副作用”是指任何影响函数执行范围之外的事情。例如，一个网络请求，它会让你的代码与第三方进行通信（从而发出请求，导致记录日志、保存或更新缓存，以及函数之外的各种影响）。

还有更微妙的副作用。改变闭包作用域变量的值就是副作用。将新元素推送到作为参数传入的数组中也是副作用。执行时没有副作用的函数被称为“纯”函数：它们接受参数并返回值。执行函数时不会发生任何其他事情。这使得函数易于测试、推理，并且符合此描述的函数在优化或重构时具有各种有用的属性。

纯函数是确定性的（这意味着，给定一个输入，它们总是返回相同的输出），但这并不意味着所有非纯函数都有副作用。例如，在函数中生成一个随机值会使其不纯，但这不属于副作用。React 完全基于纯函数，并要求你保持几个生命周期方法的纯性。

🔗资料来源： reddit.com

感谢🙌的阅读，祝你面试顺利！
如果喜欢，请分享给你的开发者同事！
更多 FullStack 面试问答，请访问👉 www.fullstack.cafe

文章来源：https://dev.to/fullstackcafe/26-reactredux-interview-questions-you-should-know-in-2018-41je
Devto 翻译
PREV
软件开发人员薪资谈判的 5 条规则。获得比市场价高出 20% 的薪资
NEXT
开发人员需要注意的十种认知偏差 简介 偏差 讨论 参考文献