React.js 面试 - 技术提交和详细反馈
更新:由于公司不愿共享作业代码,公开链接已失效。很抱歉,该代码库无法再公开。感谢大家的反馈。
我最近为我正在面试的一家跨国公司创建了一个 React.js 项目,他们对我提交的作业提供了非常详细的反馈。
在此共享代码库和公司提供的反馈,以便任何人都可以从中受益。
要求:创建一个React.js
应用程序来列出股票,点击股票将进入包含股票报价列表的股票详细信息页面。
- 應該是可過濾的。
- 股票报价可以按日期排序。
- 一旦报价到期,就获取新的报价[轮询]。
- 應該使用
React.js
。
提交:(目前是私人的)
- GitHub: 合理的股票投资组合
- 实时网址: Sensible-Stocks
📃 详细反馈
@Negatives
- code look messy and unnecessarily made complicated
- created a common http get service around axois, the implementation is not proper
- unnecessary component wrappers, just for using some CSS classes
- usage of error boundary is not in the recommended way
- unnecessarily added new functionality rather than concentrating on the complete solution
- unnecessarily suppressing lint rules
- not handling mobile responsiveness
@Instruments page / stock listing
- api call twice on page mount
- using 2 different state for search results and default view
- filter function will always runs
@Quotes page / stock detail page
- api call twice on page mount
- polling is implemented but the implementation is messy and won't work
implementation details
- spawn a web worker and listen for post message, inside this if the quotes list length is 0 make an api call to update the quotes
- providing the user a control to update the interval (1,2,3,5,10 ms) for checking expired quotes
- there's a set interval run on this interval (1..10 ms) inside this posting a web worker message
- web worker will run the loop for checking the quote's expiry and the expired leg is removed from the list
- once all items have been removed from the list, initiate the api call to fetch new quotes, this time frontend will hit the server at least 100-300 times (sometimes more than 1800 requests) reasons for this the web worker will receive a message every 1-10ms and hit the server
- not properly clearing set interval, leads to calling the previous apis as well, now the loop will hit the server more than 5k times
- Use string split and replace T and Z to convert the timezone for comparing the time
- timestamp not converted to IST in the table listing
@Positives
- Using typescript
- Using error boundaries
- segregating code by spliting components and util functions
Instruments page
- implemented search
Quotes page
- implemented sort
We thank you for the time, energy, and effort you invested in our process and we wish you the very best in your future endeavours.
不同意观点。
- 我觉得这条反馈没什么用,因为它说代码看起来很乱,我完全不同意这种说法。大家可以就此提出反馈,这会非常有帮助。
- 此外,在 v18 中,React 在开发模式下确实会将所有内容渲染 2 次,这就是 API 被调用两次的原因,但在生产中不会发生这种情况。
- API 接收的时间戳必须是 Unix 时间戳或 UTC 格式,这样才能更好地进行日期操作。我之前在时间转换方面遇到了不少麻烦,最终用
split
和 来处理replace
。我本来不想用moment来完成这一项任务。 - 过滤函数将始终运行:我应该在这里做的是,每次用户在 s 搜索字段中输入任何内容时,过滤函数都应该运行。
- 错误边界的使用不符合推荐的方式- 推荐的方式是什么?
最后,这是一次非常愉快的经历,让我了解到了新事物。
感谢您的阅读🤓
文章来源:https://dev.to/rajeshroyal/reactjs-interview-technical-submission-and-detailed-feedback-2pk7