React Live 编码面试技巧

这篇博文并不是关于初级前端开发人员如何在现场编码面试中取得好成绩，而是关于如何准备面试以及可能给出的一些任务的实用建议。

这篇文章中的所有信息均基于我的亲身经历以及我事先进行的一些研究。它并非一套指导你如何做的规则，而更像是你所能预期到的以及你该如何准备。

好了，说了这么多，让我们想象一下，我们收到了下一轮面试的邀请，是现场编程技术面试。我们的心情既兴奋又害怕，甚至有点“冒名顶替综合症”——这完全没问题，只要给它点时间平复一下就好 :)

现在我们能够重新清晰地思考，我们明白，对于如何准备以及准备什么，存在着一定程度的不确定性和挫败感。以下是一些可以消除这些不确定性和挫败感的步骤。

分析给定的信息

让我们分析一下您手中到底掌握了哪些信息。

1. 我们知道这是一个初级职位——这意味着从技术角度来说它并不一定那么困难。
2. 我们知道您将使用 React 库 - 我们熟悉它，我们使用过它很多次。
3. 我们知道这将是实时编码 - 这意味着他们会要求我们共享屏幕并给我们必须随时编码的任务。

但我们仍然不知道具体会发生什么，也不知道应该准备什么或重复什么。向面试官询问这个问题是个好习惯。

我们可以写一份漂亮的回复，感谢邀请，并礼貌地询问需要准备什么。大多数情况下，他们会回复一些详细的信息，比如“你应该在一个简单的 CRA 项目中编写一个 Hello World，你还应该知道如何处理数据和事件，以及如何从 API 中获取数据”。

开始吧！现在我们掌握了更多信息，消除了不确定性和挫败感，所以我们可以继续制定面试准备计划了。

制定面试准备计划

1. 再看一遍面试官的邮件，把要点记下来。通常里面会有很多线索，告诉我们应该准备什么。
2. 谷歌搜索 50 个 React 面试问题并保存链接 - 我们也想重复理论
3. 写下并保存每个要点的编码解决方案（例如 - 从 API 获取数据 - 写下使用 Fetch 或 Axios 获取数据的代码；事件 - 写下创建 onClick() 事件的代码等等。）
4. 想办法找一个能帮你模拟面试的人——当然，前提是你有机会。否则，在YouTube上找一些类似的模拟面试视频看看。

现在我们有了精确的计划，我们就可以开始准备了，我们现在会更加自信和冷静，因为我们确切地知道我们应该重复什么或准备什么。

准备面试

以下是我们的工作：

• 复述 React 库的理论

请记住，面试官可能会要求解释什么是 React，它的主要功能，什么是组件、状态、props 和 JSX。这样做的主要目的是考察你如何向别人解释这些概念。准备面试时，大声说出来是个好习惯。

• 提前创建项目

使用包管理器安装 CRA 需要一些时间，因此为了避免等待，最好提前完成。删除所有不必要的代码，这样你的 App 函数中就只有一个 return() div。安装所有你认为可能对你有帮助或可以使用的其他依赖项（例如axios，react-router-dom等等bootstrap） 。

• 为要点编写解决方案

在编写解决方案时，请尝试解释一下你正在做什么。以下是可能的解释示例：
“在 App 组件的 return() 函数中，我们添加了一个button带有文本“Add Count”的函数。我们onClick()为这个按钮添加了一个事件，该事件将接受一个函数handleClick。现在我们需要创建这个函数。我们创建一个箭头函数handleClick，并在函数内部将计数器增加到 1。我们使用方法setCounter将对象的先前值更改counter为新值。”

• 让你的朋友/亲戚/同事进行模拟面试。这是准备面试的好方法。它可以帮助你发现自己的弱点并加以改进，同时还能提高你的沟通技巧。

面试日

所以，在面试前的这3-4天里，我们准备了理论、实践和沟通，感觉比以前自信多了。需要注意的是，现场编程面试是有计时器的（通常是45分钟），所以面试官会很欣赏你快速且切中要点的表达。

以下是一些可以在面试过程中使用的好技巧：

• 总是询问面试官希望你如何做某事（例如，如果你被要求制作一个按钮，那么最好询问他们是否希望你制作一个组件或只是简单的 JSX 元素）。

• 认真听讲。
  如果你没听懂，可以要求老师再解释一遍。你可以用紧张来解释，而不是因为你不知道怎么做。如果任务很长，可以把要点写在纸上。

• 使用快捷方式
  在项目中使用键盘快捷键是一种非常好的做法。它表明您知道如何节省时间并且可以轻松使用键盘/文本编辑器。

• 知道如何使用谷歌
  初级职位并不要求你无所不知（不过更高级别的职位可能有所不同）。所以你绝对可以使用谷歌。让它成为你的优势。与其费力记住某个函数的语法，不如直接用谷歌搜索，这样就不用浪费你和面试官的时间了。

可能的任务

以下是面试官可能会要求编写代码的一系列任务：

• 在页面上写“Hello World”
• 创建一个计数器并通过单击按钮增加它
• 从给定的 API 获取数据并将其存储在变量中
• 在组件首次渲染时从 API 获取数据
• 单击按钮时从给定的 API 获取数据
• 将获取的数据以字符串形式呈现到页面
• 例如，如果数据是书籍，则仅将书籍的名称和作者渲染到页面
• 将刚刚渲染的书籍的属性转换为单独的 Book 组件
• 将 Book 组件渲染到页面
• 创建另一个组件，该组件是包含 Book 组件的书籍集合。
• 将书籍集合组件渲染到页面
• 给它一些样式，使它看起来漂亮（通常这里的边距/填充/颜色或网格/弹性就足够了）

结论

现场编程面试是招聘流程中的一个重要环节。它能让面试官快速了解我们是否真正理解我们声称掌握的技术。除了编程部分，它还能展现我们如何向他人解释和交流代码，从而让他们了解我们如何与其他团队成员合作。它还能展现我们理解任务的速度，以及我们将使用什么工具来快速有效地完成任务。

我祝愿大家好运，找到理想的工作！

感谢您阅读我的博客。欢迎在LinkedIn或Twitter上与我联系:)