React.js 面试 - 技术提交和详细反馈

2025-05-26

React.js 面试 - 技术提交和详细反馈

更新:由于公司不愿共享作业代码,公开链接已失效。很抱歉,该代码库无法再公开。感谢大家的反馈。

我最近为我正在面试的一家跨国公司创建了一个 React.js 项目,他们对我提交的作业提供了非常详细的反馈。

在此共享代码库和公司提供的反馈,以便任何人都可以从中受益。

要求:创建一个React.js应用程序来列出股票,点击股票将进入包含股票报价列表的股票详细信息页面。

  • 應該是可過濾的。
  • 股票报价可以按日期排序。
  • 一旦报价到期,就获取新的报价[轮询]。
  • 應該使用React.js

提交:(目前是私人的)

📃 详细反馈

@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.
Enter fullscreen mode Exit fullscreen mode

 

不同意观点。

  • 我觉得这条反馈没什么用,因为它说代码看起来很乱,我完全不同意这种说法。大家可以就此提出反馈,这会非常有帮助。
  • 此外,在 v18 中,React 在开发模式下确实会将所有内容渲染 2 次,这就是 API 被调用两次的原因,但在生产中不会发生这种情况。
  • API 接收的时间戳必须是 Unix 时间戳或 UTC 格式,这样才能更好地进行日期操作。我之前在时间转换方面遇到了不少麻烦,最终用split和 来处理replace。我本来不想用moment来完成这一项任务。
  • 过滤函数将始终运行:我应该在这里做的是,每次用户在 s 搜索字段中输入任何内容时,过滤函数都应该运行。
  • 错误边界的使用不符合推荐的方式- 推荐的方式是什么?

最后,这是一次非常愉快的经历,让我了解到了新事物。

感谢您的阅读🤓

文章来源:https://dev.to/rajeshroyal/reactjs-interview-technical-submission-and-detailed-feedback-2pk7
PREV
使用 Next.js、AWS Amplify 和 GraphQL 在服务器端渲染实时 Web 应用程序,编辑后端,在云中保存待办事项
NEXT
Netlify Reactjs React Router 上的“页面未找到”错误已解决