React面试题（入门级-初级）

以下是一些最常见的 React 面试题，你下次面试时很可能会问到。祝你面试顺利，希望这些资料对你有所帮助。

React是什么？

React 是一个开源的 JavaScript 前端库，用于创建用户界面。它采用基于组件的方法，可以创建复杂、交互式的 Web 和移动用户界面。

使用 React 开发单页应用程序非常轻松，尤其是使用名为 Create React App 的集成工具链时。

React有哪些优势？

首先是虚拟 DOM 带来的性能提升。React 的速度快得惊人。

其次，React 使用 JSX，使代码易于阅读和编写。

第三，React既可以在客户端运行，也可以在服务器端运行。

第四，由于它只是一个视图库，因此很容易与其他框架集成。

最后，编写单元测试也很容易。

什么是JSX？

JSX 是 JavaScript 的语法扩展，它利用 JavaScript 的全部功能来描述用户界面的外观。JSX 为 React.createElement() 函数提供了语法糖。

JSX 会被编译成 React.createElement() 调用，这些调用会返回纯 JavaScript 对象。它既保留了 JavaScript 的表达能力，又提供了类似 HTML 的模板语法。

元素和组件有什么区别？

React 元素是 React 应用的构建模块。
它描述了你想在屏幕上看到的内容。React 元素是不可变的。

React 组件是小型、可重用的代码片段，它们返回一个要渲染到页面上的 React 元素。最简单的 React 组件是一个返回 React 元素的纯 JavaScript 函数。组件也可以是 ES6 类。

你可以说组件是创建多个元素的工厂。

什么是 React Fragment？

片段允许您对子节点列表进行分组，而无需向 DOM 添加额外的节点，因为片段不会渲染到 DOM 中。

这对于 CSS Flexbox 和 Grid 也非常有用，因为它们具有特殊的父子关系，在两者之间添加额外的标签会破坏布局。


React 中的 prop 是什么？

props 或 properties 是传递给 React 组件的参数。它包含从父组件传递到子组件的数据。

什么是“key”属性？

键（Key）帮助 React 识别哪些元素被添加、更改、更新或删除。应该为数组元素赋予键，以便为每个元素提供唯一的标识。

React 能够在无需重新评估太多内容的情况下重新排列元素。

React 中的 state 是什么？

状态存储着一些信息，这些信息可能会在组件的生命周期内发生变化。它是私有的，并且完全由组件控制，直到所有者组件决定将其转移出去。

为什么我们不能直接更新状态？

直接更新状态（如下所示）不会导致组件重新渲染。

请改用 `setState()` 方法。此方法会安排组件状态对象的更新。状态改变时，组件会通过重新渲染来响应。

什么是生命周期方法？

生命周期方法是在组件的不同阶段执行的自定义功能。

这些方法在组件创建或插入 DOM 时、组件更新时以及组件从 DOM 中卸载或移除时可用。

什么是受控组件和非受控组件？

受控组件是指通过 props 获取值并通过回调（例如 `onChange` onChange或 `onChange` ）通知更改的组件onClick。

表单数据由 React 组件处理。

非受控组件是指将自身状态存储在内部的组件，并在需要时使用 ref 或引用来查询 DOM 以获取当前值。

表单数据由 DOM 处理。

大多数情况下，建议在实现表单时使用受控组件。

refs有什么用？

ref 用于返回对元素的引用。当需要直接访问 DOM 元素或组件实例时，ref 非常有用。

为什么元件名称要以大写字母开头？

组件的类型取决于标签的命名方式。首字母大写和以点号结尾的命名方式都被视为 React 组件，而小写字母则被视为 DOM 元素。

什么是虚拟DOM？

虚拟 DOM（VDOM）是 DOM 的轻量级 JavaScript 表示。用户界面表示保存在内存中，并与“真实”DOM 同步。更新虚拟 DOM 比更新实际 DOM 更高效、更快捷。

当 React 发现先前虚拟 DOM 和当前虚拟 DOM 之间的差异时，它只会对实际 DOM 进行必要的更改。

即使您目前不需要，也欢迎收藏🔖。将来当您寻找新工作时，可能需要刷新/查看这些信息。

如果你想支持我——请我喝杯咖啡

如果您不想阅读，可以选择视频🎥格式：