后端开发教程 - Java、Spring Boot 实战 - msg200.com
为 React 面试做好准备
编码任务
所有面试都令人望而生畏。我知道你搜索各种面试技巧和预期问题时的感受。经过几次面试后，我得到了我的第一份开发工作，我想分享我在整个过程中学到的东西。希望对你有所帮助。
编码面试有很多种类型，但在这篇文章中，我将只处理给定时间内的编码任务。
您需要在有限的时间内构建一些简单的东西（UI、框架/库/语言的基本练习）。
这是一份 React 编程作业。我们先假设这是一份真实的面试作业。 （我从这个视频里找到了这份作业。实际上，他在三次面试中都被要求完成这份作业。 ）我附上了代码，不过在看之前，请先尝试自己写一下。
编码任务
- 您将使用 create-react-app 和react-router构建一个 Web 应用程序。
- 使用来自randomUser API的用户数据，您将呈现 10 个用户的列表。（图片 1）
- 每个用户的姓名都显示在列表中，点击后会跳转到相应的用户详情页面，其中包含用户照片、用户名和电子邮件地址。（图2）
1. 仔细阅读并确定优先顺序
你应该仔细阅读说明。不要略读。紧张的时候，你很可能会错过细节。像校对员一样仔细阅读，然后确定任务的优先级。想想他们想从你这里看到什么。并仔细检查截止日期。
（可选：排除最后5-10分钟进行排练。）
从我们上面的作业来看，面试官想看看我们是否会使用Fetch API、map、useEffect 和 react-router。所以这些都是至关重要的功能。
2. 坚持基本原则
如果你之前没有开发经验，而且申请的是初级职位，面试官通常不会指望你能写出高级代码。他们更看重的是你是否具备最低的资质。
- 确保组织好您的代码（我使用更漂亮的）并使用适当的语义标签（不要过度使用
div）。 - 如果您要从某处复制并粘贴一行代码，请确保您没有使用
var。 - 不要忘记为图像添加 alt 属性，并为每个地图子项添加唯一键。
这些都是非常基础的知识，每个人都知道。但是，如果你在面试中漏掉了一些大家都知道的知识，会发生什么呢？你肯定不想知道。
3. 进行排练
在我的两次面试中，我被要求将代码上传到公共代码库，以便面试官可以拉取我的代码库并检查代码。这意味着他们拉取代码库并执行你的代码时应该不会出现任何问题。
想象一下，你有一个演示文稿。你准备好了一切，大家都在等你演示。但在最后一刻，你的 PPT 文件打不开，或者投影仪突然连接不上。你无法保证你的代码在另一台机器上也能成功执行。
因此，如果您还有时间，请不要用附加功能或 CSS 来打动他们，而是尝试将您的代码拉到另一个文件夹中，并确保一切顺利。
3.你应该能够解释你的代码。
面试官会逐行阅读你的代码，并询问一些关于代码的问题。
可能的问题包括：
- 为什么使用
<div>而不是<button>？- React 中有什么
key？为什么我们不应该将{i}其用作键？- useEffect hook 中的第二个参数有什么用？为什么传递了一个空数组？
4. 不要在代码审查中采取防御态度
我知道有时候很难把自己和代码分开。但没人想雇佣一个对每个反馈都采取防御态度的人。
面试官可能会指出你的错误，以及哪些地方可以做得更好。保持接受的态度，并感激他们的反馈。（有多少专业的开发人员会免费审阅和评论你的代码？）他们也想看看你对以后的代码评审会作何反应。
最后，这是我为这次模拟作业编写的代码。
///App.js
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import UserDetail from "./components/UserDetail";
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route path="/profile" exact component={Home} />
<Route path="/profile/:id" exact component={UserDetail} />
</Switch>
</div>
</Router>
);
}
export default App;
///components/Home.js
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function Home() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetchUsers();
}, []);
const fetchUsers = async () => {
const res = await fetch("https://randomuser.me/api/?results=10");
const data = await res.json();
try {
setUsers(data.results);
} catch (err) {
console.log(err);
}
};
return (
<div className="userList">
{users &&
users.map(user => (
<li key={user.login.uuid}>
<Link
to={{
pathname: `/profile/${user.login.uuid}`,
state: { user }, //pass the data so that you can use it via useLocation
}}
>
{user.name.first} {user.name.last}
</Link>
</li>
))}
</div>
);
}
///components/UserDetail.js
import React from "react";
import { useLocation } from "react-router-dom";
//get the corresponding data sent from Link state
export default function UserDetail() {
let params = useLocation();
const { name, location, email, dob, picture } = params.state.user;
return (
<div>
<h2>
{name.first} {name.last}
</h2>
<img src={picture.large} alt={name.first} />
<p>
{dob.age} / {location.country}
</p>
<p>{email}</p>
</div>
);
}
结论
无论你为面试做了多少准备，都无法保证你每次都能成功。是啊，生活就是这么糟糕。如果你搞砸了一次，别让它打击你。
我在面试中也犯了一些愚蠢的错误。但人之常情的好处在于，你可以从自己的缺点中吸取教训。失败会让你知道究竟哪里可以改进，然后你就可以从那里开始。
求职过程并非短跑，而是一场马拉松。不要因被拒或犯错而感到沮丧，坚持申请。