15个用解决方案的访谈问题

React的受欢迎程度没有显示出衰落的迹象，对开发人员的需求仍然超过了世界许多城市的供应。对于经验不足的开发人员（或那些在就业市场上暂时不在工作市场的开发人员），在面试阶段证明您的知识可能令人生畏。

在本文中，我们将研究15个问题，涵盖了一系列知识，这些知识涉及与React有效理解和合作的核心。对于每个问题，我将总结答案，并给出其他资源的链接，您可以在其中找到更多信息。

钥匙要点

>本文提供了15种常见的反应访谈问题的综合列表，涵盖了一系列知识，这些知识涉及与React有效理解和有效合作的核心，例如虚拟DOM，JSX，类和功能性组件，状态和状态和道具，状态和道具， React钩子等等。

>

>文章强调了了解阶级和功能组件之间差异的重要性，键在渲染集合中的作用以及状态与道具之间的区别。
• >本文还涵盖了更高级的主题，例如道具钻探，反应上下文，redux，用于造型应用程序的不同方法以及受控和不受控制的组件的概念。
>本文通过突出了React Hooks的优势，消除了对基于类的组件的需求，使重复使用逻辑更容易，并导致更可读，可测试的代码。
1。什么是虚拟dom？
答案
虚拟DOM是组成您应用程序UI的实际HTML元素的内存表示。重新渲染组件时，虚拟DOM将其与DOM模型的更改进行比较，以创建要应用的更新列表。主要优点是它的效率很高，仅对实际DOM进行最小的必要更改，而不必重新渲染大块。

进一步阅读

了解虚拟DOM

>虚拟DOM解释

2。什么是JSX？

• 答案
JSX是JavaScript语法的扩展，它允许编写看起来像HTML的代码。它将其编译为常规的JavaScript函数调用，提供了一种为组件创建标记的更好的方法。
• >
以此JSX：

它可以转化为以下JavaScript：>

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

进一步阅读

• JSX
的简介
• jsx深度

3。类组件和功能性的组件有什么区别？

>

答案

在React 16.8（引入钩子）之前，使用基于类的组件来创建维持内部状态或使用生命周期方法所需的组件（即ComponentDidMount和shose shoreComponentUpdate）。基于类的组件是一个ES6类，该类别扩展了React的组件类，并且至少实现了Render（）方法。

类组件：

>功能组件是无状态的（再次，<span>React.createElement( </span> <span>'div', </span> <span>{className: 'sidebar'} </span><span>) </span>>

>功能组件：

>

<span>class Welcome extends React<span>.Component</span> {
</span>  <span>render() {
</span>    <span>return <h1>Hello, {this.props.name}</h1>;
</span>  <span>}
</span><span>}
</span>

注意：React 16.8中的钩子的引入意味着这些区别不再适用（请参阅问题14和15）。

进一步阅读

>功能组件与反应

中的类成分 React

的功能

• 的功能
4。键是为了什么？

>

答案

在呈现React中的集合时，在每个重复的元素中添加一个键，对于帮助反应跟踪元素和数据之间的关联很重要。密钥应该是独特的ID，理想情况下是收集项目中的UUID或其他独特的字符串：

不使用键，或使用索引作为键，在添加和删除集合中的项目时可能会导致奇怪的行为。

<span>function <span>Welcome</span>(props) {
</span>  <span>return <h1>Hello, {props.name}</h1>;
</span><span>}
</span>

进一步阅读

>列表和键

了解React的关键道具
• 5。状态和道具之间有什么区别？
>

答案

props是从其父母传递到组件中的数据。它们不应突变，而应仅显示或用于计算其他值。状态是一个组件的内部数据，可以在组件的使用寿命中进行修改，并在重新汇款之间维护。

进一步阅读

> props vs state

6。为什么要调用SetState而不是直接突变状态？
• 答案

如果您尝试直接突变组件的状态，则React无法知道它需要重新渲染组件。通过使用setState（）方法，React可以更新组件的UI。

奖金

作为奖励，您还可以谈论不能保证如何同步的状态更新。如果您需要基于另一个状态（或Props）更新组件的状态，请将函数传递给SetState（），该函数将状态和道具作为其两个参数：>

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

进一步阅读

• >正确使用状态

7。您如何限制以道具的价值类型或使其要求？

>

答案

>为了键入组件的支柱，您可以使用Prop-Types软件包（以前作为React的一部分，在15.5之前包含在React的一部分）来声明预期的价值类型以及是否需要道具：

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

进一步阅读

用proptypes
typechecking

8。什么是道具钻探，如何避免它？

>

答案

当您需要将数据从父组件传递到层次结构中较低的组件时，就会发生

支撑钻探，这是通过其他不需要道具本身的组件“钻孔”的。 > 有时，可以通过对组件进行重构，避免过早将组件分解为较小的组件，并将公共状态保留在最接近的共同父母中，从而避免使用道具钻孔。您需要在组件树中深/分开的组件之间共享状态，您可以使用React的上下文API或诸如Redux（Redux）的专用状态管理库。

进一步阅读

Prop钻孔

• 9。什么是反应上下文？

答案

通过React提供了上下文API，以解决应用程序中多个组件之间共享状态的问题。在引入上下文之前，唯一的选择是引入单独的州管理库，例如Redux。但是，许多开发人员认为Redux引入了许多不必要的复杂性，尤其是对于较小的应用程序。

进一步阅读

上下文（react docs）

如何用react钩和上下文api
• 替换redux
• 10。什么是redux？

答案

Redux是在上下文API存在之前创建的第三方国家管理库。它基于一个称为商店的状态容器的概念，该组件可以从AS Props接收数据。更新商店的唯一方法是将操作派遣到商店，该操作将传递到还原器中。还原器接收到动作和当前状态，并返回一个新状态，将订阅的组件触发重新渲染。

进一步阅读

开始使用redux

开始

深入研究redux

11。对React应用程序进行样式的最常见方法是什么？
• 答案

>造型组件的样式组件有多种方法，每个方法都有优点和缺点。要提到的主要内容是：

• 内联样式：非常适合原型制作，但具有局限性（例如，伪级的样式）
基于类的CSS样式：性能多于内联风格，并且是新手React 的开发人员熟悉的
• > css-in-js样式：有多种库可以在组件中声明样式为JavaScript，更像是代码。
• 进一步阅读

如何样式的反应组件

• 12。受控组件和不受控制的组件有什么区别？
>

答案

>在HTML文档中，许多形式的元素（例如，，<input>）维护自己的状态。一个不受控制的组件将DOM视为这些输入状态的真理来源。在受控组件中，内部状态用于跟踪元素值。当输入的值发生变化时，React重新呈现输入。 与非反应代码集成时，不受控制的组件可能很有用（例如，如果您需要支持某种jQuery form插件）。<h3>> </h3>进一步阅读<p> </p> <p>受控与未控制的输入</p> <h3>受控组件（react docs）</h3> <ul>不受控制的组件（react doc）<li> </li> <li>13。生命周期方法是什么？</li> <li>答案</li> 基于类的组件可以声明在其生命周期中的某些点所调用的特殊方法，例如安装时（渲染到DOM）以及即将被卸载时。这些对于设置和拆除组件可能需要的东西很有用，设置计时器或绑定到浏览器事件。 </ul>以下生命周期方法可在您的组件中实现：<ancy>> <h2> </h2> componentWillmount：在创建组件后呼叫，但在将其渲染到DOM<h3>>之前 </h3>componentDidmount：在第一个渲染后打电话；组件的DOM元素现已可用<p> </p>componentWillReceiveProps：prop更新时呼叫 <p> showscomponentupdate：收到新的道具时，此方法可以防止重新渲染以优化性能<and>> </and></p>componentwillupdate：在收到新的道具<ul>>和<li> showscomponentupdate返回true true </li>时，请致电 <li>componentDidupdate：在组件已更新</li>之后调用 <li> componentWillunMount：在将组件从DOM删除之前拨打，允许您清理事件听众之类的内容。</li>> <li> </li>处理功能组件时，使用效果挂钩可用于复制生命周期行为。 <li>进一步阅读<em> </em> </li>> React生命周期方法<li> </li>组件生命周期API<li> </li> </ul>14。什么是React Hooks？<p>> </p>答案<h3> </h3>钩子是React试图将基于类的组件（即内部状态和生命周期方法）的优势带到功能组件的尝试。<ancy>>>>>><h3>进一步阅读</h3> <ul> <li>在5分钟内学习React Hooks</li> <li> React Hooks：如何开始并建立自己的</li>> </ul> <h2>15。 React Hooks的优点是什么？</h2> <h3>答案</h3> <p>引入钩子反应有几个陈述的好处：<ance> </ance></p> <ul>删除对基于类的组件，生命周期钩和此关键字Shenanigans <li>的需求 </li>>通过将共同功能抽象为自定义钩<li>使重复使用逻辑更容易重复使用 通过能够将逻辑与组件本身分开，更可读，可检验的代码</li> <li> </li>进一步阅读</ul> <h3> </h3> React Hooks的好处<ul> <li>反应挂钩 - 与较旧的可重复使用逻辑方法的优点和比较。 </li> <li>总结</li> </ul>尽管绝不是全面的清单（React正在不断发展），但这些问题涵盖了很多基础。了解这些主题将为您提供有关图书馆的良好工作知识，以及其最近的一些更改。跟进建议的进一步阅读将有助于您巩固自己的理解，因此您可以证明深入的知识。<h2> </h2>>我们将跟进一份针对采访代码练习的指南，因此请留意不久的将来。 <p>祝你好运！</p> <p>常见问题解答准备为React访谈</p> <p>></p>我应该如何为React开发人员工作面试做准备？ <h2>为React开发人员的工作面试做准备，React的核心概念，与React相关的练习编码练习，审查您的React项目组合，并准备好与州管理，组成的生命周期以及相关技术讨论您的经验React Router。</h2> <h3></h3>>在面试之前，研究公司及其开发需求的最佳方法是什么？ <p>>通过访问其网站，检查其Web应用程序或项目，并了解如何在其技术堆栈中使用反应，从而研究公司。量身定制您的知识，满足他们的特定需求，并表现出您为基于React的项目做出贡献的热情。</p> <h3></h3>>我应该如何为我的简历量身定制我的简历？ <p>>通过强调您对React的体验，包括特定项目，技术和与React开发有关的成就来量身定制简历。强调您对React组件，州管理和任何相关库的了解。</p> <h3></h3>>有哪些常见的特定于React的访谈问题？ <p>常见的反应访谈问题包括“解释反应组件生命周期”，“您如何管理反应状态？”和“使用React Hooks有什么好处？”</p>><h3>></h3>>如何有效地准备与React开发有关的技术问题？与反应有关的练习编码练习，例如构建组件，管理状态以及使用道具和环境。熟悉反应概念，例如虚拟DOM和组件可重复使用性。<p></p> <h3>>如何在访谈中证明我对React的熟练程度？ </h3>>通过与现实世界项目讨论您的经验，解释您如何优化性能，并分享您构建的复杂组件的示例，从而演示您的React技能。准备解释您的状态管理和组件架构的方法。<p> </p> <h3>>在访谈中了解React的组成生命周期有什么意义？ </h3>了解React组件生命周期对于有效管理组件行为和状态至关重要。准备解释生命周期方法，以及何时在现实世界中使用它们。<p></p>w <h3> hat是在React开发人员访谈中避免的一些常见错误吗？ </h3>常见的错误包括无法充分解释您的项目，而不是询问有关公司或角色的问题，并证明缺乏有关React Basics的知识。通过彻底的准备和周到的交流来避免这些陷阱。<p>></p></ancy></ancy>

以上是15个用解决方案的访谈问题的详细内容。更多信息请关注PHP中文网其他相关文章！