前 50 个必须知道的 React 面试问题和答案

ReactJS 开发人员受到高度追捧，这是有充分理由的。 但是你必须证明你对框架的熟练程度才能得到这份工作。

以下是您应该了解的常见 React 开发问题及其答案。 它包括从基础到更高级主题的所有内容。

1.什么是反应？

React 是一个免费且 开放源码 用于用户界面开发的 JavaScript 库，使用组件为单页应用程序创建输出。React 由 Facebook (Meta) 开发，由开发者社区维护。

2.列出React的重要特性

React 最重要的特性包括：

1. 使用方便
2. 快速发展
3. 组件的使用
4. x
5. 虚拟 DOM
6. 高效能
7. 单向数据绑定

3. React 的项目仓库在哪里？

React 是一个单一的存储库，位于 https://github.com/facebook/react. 作为单一存储库意味着它的所有代码和其他源都存储在同一个地方，以便于开发和管理。

4. React 目前的稳定版本是什么？

自 14 年 2022 月 18.2.0 日起，React 的最新稳定版本是 XNUMX。

5. 说出 React Native 和 ReactJS 的区别

React 和 ReactJS 是一样的，而 React Native 是建立在 React 之上的。 由于它们的区别，React 用于为 Web 应用程序创建动态和响应式用户界面，而 React Native 则用于将应用程序构建为移动应用程序。

6. 元素和组件有什么区别？

React 元素是为表示 DOM 节点而创建的简单且不可变的对象。 不可变意味着它一旦被创建就无法更改，因为它呈现给 DOM。 另一方面，React 组件是可变的，一旦渲染就会产生 JSX 输出。

7. 如何创建组件？

在 React 中创建组件有两种方法：1.) 函数组件和 2.) 类组件。 顾名思义，函数组件是使用函数声明创建的，而类组件是使用类声明创建的。

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. 列出一个 React 组件的 4 个阶段

React 组件在其生命周期中经历以下 4 个阶段：

1. 初期 - 默认状态下的组件构造，带有初始道具
2. 安装阶段 – 组件的 JSX 渲染
3. 更新阶段 – 组件状态更改和应用程序重绘
4. 卸载阶段 – 从 DOM 中移除组件

9. 解释高阶组件的含义

高阶组件 (HOC) 是一种用于创建组件的 React 方法。 它使用现有组件创建具有额外功能的新组件。 换句话说，HOC 是一个将组件作为参数并返回具有附加功能的新组件的函数。

10. 什么是受控组件和不受控组件？

受控组件是一个 React 组件，它通过 props 获取其值并通过回调通知系统任何更改。 它由管理它的父组件控制 州 并将值作为道具传递给受控组件。 另一方面，不受控制的组件管理其状态，您需要查询 DOM 运用 文献 得到它的价值。

11. React 中的 Props 是什么？

React 中的 Props 只是表示属性的一种简单方式，通过这种方式，您指的是组件的属性。 Props 用于将数据从父组件传递到一个或多个子组件，并且它们对子组件是只读的。

12.什么是props.children？

Props.children 属性包含有关具有开始和结束标记的组件的所有内容的信息。 这些子元素指的是当前组件内定义的所有元素，可以是一个、多个或无。

13. 你能更新 React 中的 props 吗？

不，React 中的 props 是自上而下且不可变的。 这意味着一个组件可以将它喜欢的任何属性发送给它的子组件，但它不能更新它的 props。 只有它的父级可以更新它的 props。

14. 什么是 JSX？

JSX 代表 JavaScript XML。 它是一个 JavaScript 语法扩展，可以在 React 代码中编写 HTML。 浏览器无论如何都不理解 JSX，因此 React 必须将其呈现为可读的 HTML 代码。

15. 组件和元素有什么区别

元素是虚拟 DOM 节点的无状态且不可变的定义。 它包含类型和属性，但没有像组件那样的方法。 这种方法的缺乏使它很快。

16. React 中的状态是什么？

React 中的状态是指组件中的内置对象，用于保存和管理有关该组件的信息。 状态会随着时间而改变，因此会触发该组件的重新渲染。 您必须在组件的构造方法中定义状态，否则组件将变为无状态。

17.什么是无状态组件？

无状态的 React 组件没有状态。 这意味着您既不能使用 这个.setState() 方法也没有渲染。 不过，无状态组件可以有 props。

18. 如何在 React 中更新状态

您通过调用它来更新组件的状态 这个.setState() 方法。

19. 解释 React 的严格模式

React 的严格模式是一种工具，它通过激活对组件的更深层次的检查并突出显示更多警告来帮助开发人员发现应用程序中的潜在问题。 严格模式仅在开发模式下可用。

20. React 中提升状态是什么意思？

这意味着让子组件从其父组件共享一个公共状态，因为这比每个子组件单独管理公共状态更容易管理。

21. 你如何在 React 中传递数据？

你使用 props 和回调在 React 中传递数据。 React 的 props 是单向的，允许属性只从父组件传递给它们的子组件。 要将数据从子组件传递给父组件，您必须使用回调函数。

22.定义 助焊剂 在反应中

Flux 是一个单向概念，用于指导应用程序中的数据流。 单向意味着数据只能从父组件传递到子组件。 Flux 还可以为每个应用程序包含多个数据存储。

23.定义 终极版 在反应中

Redux 是一个有用的开源 JavaScript 库，用于管理应用程序中的复杂状态。 它是独立的，可以在Angular等其他框架中使用。 与 Flux 不同，Redux 集中了应用程序的状态管理，从而更容易构建复杂的 UI。

24. 什么时候应该使用 Redux？

并非所有应用程序都需要 Redux。 但它在以下情况下很有帮助：

1. 当您的应用程序中有大量应用程序状态时
2. 当您的应用程序逻辑复杂时
3. 当您的应用程序具有大型代码库时
4. 当您必须经常更新应用程序时
5. 当您有很多人在使用该应用程序时

25. Redux 和 Flux 的主要区别是什么？

两者的主要区别在于 Redux 管理来自单个存储的所有应用程序数据，而在 Flux 下可以有多个存储。

26.列出Redux的组件

Redux 有 4 个主要部分：

1. 线上商城 – 这是您存储应用程序状态的地方。
2. 操作 – 这些是导致应用程序将数据发送到 Redux 存储的事件。
3. 减速器 – 这是一个接受当前应用程序状态和动作作为参数的函数，然后返回一个新状态作为结果。
4. 中间件 – 此功能允许开发人员在组件到达减速器功能之前捕获组件的所有操作。

27. 什么是 React Hooks？

React 钩子是函数组件的一个特性，它允许你访问不同的 React 特性，例如状态数据和渲染更新。 它是在 React 16.8 中引入的。

28.列出React中Hooks的类型

React 中有 15 多个钩子，从基本钩子（如 useState、useEffect 和 useContext）到附加钩子（如 useCallback、useReducer、useMemo、useRef 等）。

29. 什么是片段？

React 片段是一种在组件中对多个子元素进行分组的便捷方式，无需将它们添加到 DOM。 您只需使用以下方式定义标签：

<>

or

并加载您想要的所有子元素。 唯一的区别是简写版本 <> 不接受键和属性，而长版本接受。

30.列出react-dom包的主要方法

它们是用于将子项渲染到外部 DOM 的 createPortal() 和用于刷新更新的 flushSync()。 还有 render() 和 hydrate() 方法，从 React 18 开始，它们已被 createRoot() 和 hydraRoot() 取代。

31.什么是反应键？

键是最适合用于管理列表的唯一标识符。 键可以很容易地识别列表中的各个项目，并知道每个项目何时被更新、删除或以任何方式更改。

32. 为什么 React 键很重要？

键在 React 中很重要，因为它有助于高效渲染真实的 DOM。 React 很好，因为它试图最小化它在事件之后重新渲染的组件，并且在列表上使用键可以防止 React 必须重新渲染整个列表，这可能是大型列表的问题。

33. React 中的事件是什么？

事件是应用程序中来自用户或系统的任何操作。 事件的范围可以从鼠标单击或点击移动设备到窗口大小调整、按键、拖动、聚焦等。

34.解释什么 合成事件 手段

合成事件是浏览器原生事件的包装，问题在于不同的浏览器对它们的事件命名不同。 React 使用合成事件来避免必须为所有不同的浏览器创建多个实现和方法的问题。 这样，React 将所有不同浏览器事件的通用名称维护为统一的 API。

35. 什么是 Webpack？

Webpack 是一个模块捆绑系统，用于组合和缩小 JavaScript 和 CSS 文件。 它基于 Node.js 构建，在处理大量文件或图像和字体等非代码资产时非常有用。

36.什么是create-react-app？

Create-react-app 是一个工具，可帮助您在 Node.js 环境中创建单页 React 应用程序。 它会生成启动基本应用程序所需的所有文件和文件夹，然后从那里获取。 它需要 Node 版本 14.0.0 以上和版本的 npm。 5.6.

用法很简单：

npx create-react-app myNewApp

cd myNewApp

npm开始

37. 你能用 React 渲染服务器端吗？

是的，你可以，尽管对于大型项目来说，这可能会占用大量资源。服务器端渲染很有用，因为它可以改善用户体验和 SEO 应用程序你需要 Node.js 环境、Webpack 之类的打包工具以及 Next.js 和 混音 在运行时渲染 React 应用。解决资源占用问题的一个方法是使用 静态站点生成器，例如基于 Next.js 的 盖茨比.

38. 解释箭头函数的作用

箭头函数只是定义函数的一种更短的方式。 它是一个 ES6 简写，它取代了：

= 函数（） - ()=>.

例如：

测试 = 函数（）{

返回“这是一个测试”；

}

然后变成：

测试 = () => {

返回“这是一个测试”；

}

或对于单行语句：

test = () => “这是一个测试”；

39。 什么是 反应路由器?

React 路由器是一个在 React 应用程序中提供路由功能的库。 它使包含和使用丰富的导航组件变得容易，这对于大型或复杂的项目非常有帮助。

40. 使用 React Router 的主要优势是什么？

它为您的应用程序创建不同的 url 路径并提供 window.location 值和历史对象。

41.什么是ComponentWillUnmount()？

这是一个组件方法，每当 React 即将销毁组件时都会调用它。 这是清理东西、清除计时器、取消网络请求和处理其他重要的去初始化问题的好地方。

42. Constructor() 是什么？

构造函数是在组件初始化期间调用的组件方法。 它通常用于初始化本地状态和绑定事件处理程序方法。

43. 什么是虚拟 DOM？

React 的虚拟 DOM 是实际 HTML 文档的 DOM 的轻量级副本。 它用于有效管理和更新真实 DOM 上的更改。

44. Virtual DOM 相对于 Real DOM 的优势是什么？

虚拟 DOM 比真实 DOM 更轻量且渲染速度更快，这使得先渲染到虚拟 DOM 并且仅在需要时才对真实 DOM 进行更改的效率更高。 真实 DOM 上的每个节点在虚拟 DOM 上都有对应的组件，一旦虚拟组件在渲染后发生变化，React 就会准确地知道要更新或删除哪个真实 HTML 节点。

45.解释这个词 和解 在反应中

Reconciliation 是 React 仅在必要时更新真实 DOM 的方法，通过差异检查虚拟 DOM 的更新版本并仅更新真实 DOM 上发生更改的确切节点。

46.解释这个词 探查 在反应中

Profiler 是一个 React 工具，它通过测量应用程序渲染的次数以及每个组件渲染所需的时间来帮助优化应用程序。 这有助于开发人员识别可能需要优化的应用程序部分。

47.解释这个词 语境 在反应中

Context 是一种在多个级别的 React 组件之间传递数据的方法，而无需使用 props 通过每个嵌套级别传递数据。 它最适合用于与许多不需要不断更新的组件轻松共享数据，例如主题信息和用户数据。 它的缺点是它会使组件重用变得困难。

48.解释这个词 安装 在反应中

React 中的挂载是将组件作为节点附加到 DOM 的过程。 卸载则相反。

49.解释这个词 渲染 在反应中

渲染是绘制组件的过程。 它通常发生在组件的状态发生变化并且 React 必须重绘 UI 时。 如果一个组件在渲染过程中被重绘，那么它的子组件也会被重绘。

50.解释这个词 误差边界 在反应中

错误边界是指一个 React 组件，它从其子组件中捕获 JavaScript 错误，记录错误，并显示一个备用 UI 来代替崩溃的节点。 React 16 中引入了错误边界。

结论

我们已经到达了这个 50 个必须知道的 React 面试问题列表的末尾，希望你现在应该对你可以期待什么有一个很好的了解。

您还应该注意，没有什么是一成不变的，您的面试可以采取任何方向因此，您应该继续学习并保持最新状态。