前端开发人员（React）的热门面试问题

过去几天，我参加了许多前端开发人员的面试。因此，在这篇文章中，我整理了一些我被问到的最常见的问题。

问题 1. 如何优化缓慢的 React 网站？

我的观点：

1. 我们可以打开网络选项卡并检查问题出在前端还是后端。
2. 如果问题出在前端，我们可以使用分析器来查看问题所在。我想几乎每个前端开发者都听说过 Lighthouse 或 GTMatrix。

因此，这些分析器的问题在于它们主要提供有关首次绘制/交互时间等的信息......但假设有一个表在每次状态改变时都会被渲染，或者组件的计算时间太长，您如何找到？

React Profiler 来拯救我们了。

我们可以看到哪个组件花费了多少时间来渲染，然后我们可以进一步记住花费很长时间来渲染的组件/函数。

阅读更多

Q2. 你会如何设计一个松耦合的 React App？

我的观点：

1. 不要重复自己：每当您发现重复了一段代码时，请尝试创建另一个组件/功能并将其分解成小块。
2. 尝试将 API 调用移到顶部组件上。
3. 尝试减少传递的道具数量。
4. 尽可能尝试使用高阶组件。
5. 在专用减速器中划分特征。
6. 最后但同样重要的一点是，使用像 Redux-Saga 这样的副作用管理器来处理副作用。

应用程序耦合越松散，其可扩展性就越强。

何时使用 Redux Thunk 和 Redux Saga？

注意：Redux Thunk 只有 10 行代码（包括函数名和花括号）（约 300 字节）🥺Redux
-Saga 约为 13kb 🙂

我的观点：如果你正在创建一个小型网站，那么 Redux Thunk 就是你的不二之选。Redux Saga 就像在你的 Web 应用中多了一个线程，它可以轻松处理任何副作用，这一切都归功于生成器函数。
阅读更多

React 中的双向数据绑定？

我的观点：React 是单向数据绑定，这意味着数据流只能从所有者流向子组件，子组件无法直接更新数据。它需要分发一些 action/调用所需的函数来更新数据。

但在某些情况下可能需要双向数据绑定。
那么，如何应用双向数据绑定呢？React 也提供了一些函数来实现。
阅读更多

React 中的合成事件

我的观点：我们很多人都在 React 中使用过合成事件，但很少有人了解它。😝
引用 React 文档

您的事件处理程序将传递 SyntheticEvent 的实例，它是浏览器原生事件的跨浏览器包装器。它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()，但这些事件在所有浏览器中的工作方式相同。

阅读更多

所有答案均为我个人观点，如果您认为我可能错了，请在下方评论。我欢迎大家讨论。😃

通过Linkedin、Github、Twitter、Youtube联系我😇