React 面试问题解答与解释 #1

视频

如果您更喜欢带有动画示例的视频，您可以在我的 YouTube 频道上查看我制作的有关此主题的视频：

什么是 React？

React 是一个开源前端 JavaScript 库，用于构建用户界面，尤其是单页应用程序。它使用基于组件的方法来创建可重用的 UI 组件。它由 Facebook 开发，并于 2013 年开源。

React 的主要特性是什么？

React 使用虚拟 DOM来跟踪文档对象模型的变化，并仅更​​新真实 DOM 中已更改的部分。它支持客户端和服务器端渲染，并使用带有 props 的单向数据流。我们可以使用它创建可组合或可复用的 UI 元素。

什么是 JSX？

这个缩写本身代表 JavaScript XML。它是 JavaScript 语言语法的扩展。它的外观与 HTML 类似，我们可以在其中使用 HTML 标签，也可以使用 JavaScript 表达式，并且如果将 JavaScript 变量放在花括号中，还可以读取它们。JSX 提供了一种构建组件渲染的好方法。我们通常使用 JSX 编写 React 组件，但这并非必需。您可以使用纯 JavaScript 编写 React 组件。
不使用 JSX，仅使用 JavaScript 编写 React 组件： 使用 JSX 的 React 组件：

React 元素和组件之间有什么区别？

元素是描述 DOM 节点或其他组件的普通对象。它们描述了您想要在浏览器中渲染的内容。元素可以在其 props 中包含其他元素。创建 React 元素的成本很低。一旦创建，它就永远不会改变。 另一方面，组件可以用几种不同的方式声明。它可以是带有 render 方法的 ES6 类，也可以是一个简单的函数。与元素不同，组件可以具有内部状态。在这两种情况下，它都接受名为 props 的输入对象并返回一个 JSX 树。

创建组件的两种主要方式是什么？

我们可以使用函数或 ES6 类来创建组件。如果选择使用 ES6 类方法，则需要扩展 React 提供的 Component 或 PureComponent 类。 另一种越来越流行的方法是使用函数来创建组件。我们可以使用 function 关键字、函数表达式甚至箭头函数来创建组件。

何时使用类组件而不是函数组件？

简而言之，如果你使用的是新版 React，那就由你决定。然而，在 16.8 版本发布之前，如果你的组件需要状态，或者你想在组件的特定生命周期内执行某些操作，则必须使用基于类的组件。Hooks 随 16.8 版本而来，并开始迅速风靡全球。现在，你可以使用 Hooks 做所有事情，而无需使用基于类的组件。

什么是纯组件？

如果 React 组件针对相同的 state 和 props 渲染相同的输出，则该组件被视为纯组件。如果我们声明为纯组件，React 将仅在 state 或 props 发生变化时重新渲染该组件，从而提高渲染效率并提升性能。

使用基于类的组件时，我们可以通过扩展 PureComponent 类（而不是 Component）来创建纯组件。这样，React 会实现 shouldComponentUpdate 生命周期方法，并对 props 和 state 进行浅层比较，以确定是否应该重新渲染。

从现在起，我们也可以使用函数式组件来创建纯组件。我们可以通过将组件包装到 React 提供的 Memo 高阶组件中来实现。

React 中的‘状态’是什么？

状态是组件的私有数据，在其生命周期内可能会发生变化。如果组件的状态发生变化，组件将重新渲染。
使用基于类的组件时，状态由对象表示，我们可以使用 setState 方法对其进行修改。 在函数式组件中，我们可以使用 useState Hook。它会返回一个数组，其中两个变量是状态数据，另一个是状态数据的设置方法。我们可以通过在 useState 函数调用中提供它来设置默认状态。

React 中的 props 是什么?

Props 是组件的输入数据，可以是原始值或对象。它们是单向的，这意味着 props 只能从父组件向下传递到子组件。Props 在组件创建时传递。我们可以在 JSX 中使用类似于 HTML 标签属性的命名约定来提供它们。子组件通过 props 对象接收所有提供的 props。在基于类的组件中，我们可以通过 this.props 访问它们；在函数式组件中，它们作为参数传递，我们可以从中提取它们。

状态和道具有什么区别？

props 和 state 都是普通的 JavaScript 对象。虽然它们都包含影响渲染输出的信息，但它们在组件方面的功能有所不同。props 传递给组件的方式类似于函数参数，而 state 则在组件内部进行管理，类似于函数内声明的变量。

为什么我们不应该使用基于类的组件直接更新状态？

直接修改状态会导致组件无法感知状态变化，因此不会重新渲染。我们应该使用 setState 方法，它会安排组件状态对象的更新，当状态发生变化时，组件将重新渲染。🚨
直接更新状态的糟糕方法： ✅ 异步设置状态：

setState()中的回调函数有什么用途？

setState 方法是异步的，我们在参数中提供的回调函数会在状态修改完成且组件重新渲染时被调用。它用于进行任何修改后的更改，但我们应该使用 componentDidUpdate 生命周期方法。

HTML 和 React 事件处理有什么区别？

在 HTML 中，事件名称按照惯例全部小写，但在 React 中，更准确地说是 JSX，事件名称采用驼峰命名法 (camelCase)。另请注意，HTML 中的回调函数位于双引号内，而 React 中则位于花括号内。
<button onclick="handleClick()"></button>
在 HTML 中，可以返回 false 来阻止默认行为，而在 React 中，必须显式调用 preventDefault 。
最后一个区别是，在 HTML 中，回调函数必须被调用，因此必须在末尾写上括号，而在 React 中，我们只需传递回调函数的引用即可。

HTML 中的事件处理： React 中的事件处理：

如何将参数传递给事件处理程序？

您可以传递一个箭头函数，该函数返回所需的函数调用及其提供的参数。 或者，您可以通过在传递的回调函数上调用 bind 方法来实现相同的行为。第一个值是所需的 this 值，但从第二个参数开始，所有其他参数都将传递给该函数。

React 中的合成事件是什么？

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

什么是内联条件表达式？

您可以使用内联条件表达式来有条件地渲染 React 组件或元素。您可以使用三元运算符，它是简化的 if else 语句，它始终返回一个值。如果选择这种方法，则需要先提供条件，然后在问号后提供当条件计算为真时应返回的内容，并且可以在冒号后定义否则应返回的内容。 如果不需要 if 语句的 else 分支，则可以使用 AND 运算符的短路评估。如果 AND 运算符左侧的计算结果为真，则返回其左侧的操作数。如果我们想在特定条件为真时渲染某些内容，而当条件计算结果为假时不渲染任何内容，则可以使用此行为。

关键道具是什么？我们为什么要使用它？

当我们基于数组渲染多个组件时，我们会使用 key props。key 帮助 React 识别哪些项目已更改、添加或删除。应该为数组中的元素指定 key，以赋予元素稳定的标识。选择 key 的最佳方式是使用一个字符串，该字符串可以在同级元素中唯一地标识列表项。通常，您会使用数据中的 ID 作为 key。当渲染项没有稳定的 ID 时，可以在万不得已的情况下使用项索引作为 key。如果项的顺序可能会发生变化，则不应使用索引作为 key。
带有 key 的列表：

您可以在哪里向我了解更多信息？

我创建了涵盖多个平台上的 Web 开发的教育内容，请随意查看。

我还创建了一个简报，分享我创作的一周或两周的教育内容。不废话💩，只讲教育内容。

🔗 链接：

• 🍺 支持免费教育，请我喝杯啤酒
• 💬 加入我们的Discord 社区
• 📧在此订阅新闻通讯
• 🎥 YouTube JavaScript 学院
• 🐦推特：@dev_adamnagy
• 📷 Instagram @javascriptacademy