当前位置：首页 > 科技 > 软件

我经常会问应聘者的三个React面试题

来源：责编：时间：2024-09-10 09:50:30 274观看

导读简介在面试 React 开发人员时，了解他们如何思考解决问题和优化 React 应用程序至关重要。简单的问题是不够的。我喜欢向候选人提出更具挑战性的问题，以测试他们处理 React 复杂性的能力。在今天这篇文章中，我分享3个我

简介

在面试 React 开发人员时，了解他们如何思考解决问题和优化 React 应用程序至关重要。简单的问题是不够的。我喜欢向候选人提出更具挑战性的问题，以测试他们处理 React 复杂性的能力。

在今天这篇文章中，我分享3个我经常会问应聘者的 React 面试题。这些问题侧重于管理嵌套状态、避免不必要的重新渲染以及有效使用 useCallback 来优化性能。每个问题都附有详细的解释和实用的解决方案。

现在，让我们分解这些问题并探索解决它们的最佳实践！

1. 在 React 组件中更新嵌套状态

问题：您在 React 组件中有一个深度嵌套的状态对象，它表示用户信息，包括用户的地址。您的任务是在单击按钮时更新地址对象中的城市属性。挑战在于确保在状态中仅更新城市值，而不直接改变原始状态。单击“更新城市”按钮后，UI 应反映新的城市值。

具体任务：单击“更新城市”按钮时，将城市值更新为“旧金山”，并确保此更改立即反映在 UI 中。

解决方案：

为了正确更新城市属性而不改变原始状态，您应该使用扩展运算符创建需要更新的状态的每个级别的浅表副本：

此方法可确保状态对象的每个级别都被不可变地复制和修改。单击“更新城市”按钮时，updateCity 函数会创建一个新的状态对象，其中只有地址对象内的城市属性会更新为“旧金山”。

使用扩展运算符 (...) 有助于通过创建每个嵌套对象的新副本而不是直接修改它们来保持不变性。这确保了 React 的状态管理有效运行，并且 UI 正确反映了更新的城市值。

2. 防止子组件不必要的重新渲染

问题：你有一个父组件，它将 props 传递给子组件。每当父组件重新渲染时，子组件也会重新渲染，即使它的 props 没有改变。挑战在于优化组件结构，以便当父组件的状态更新但子组件的 props 保持不变时，子组件不会不必要地重新渲染。

场景：

考虑一个维护两个状态的父组件：计数和数据。计数状态经常更新，而数据状态保持不变。父组件渲染一个 ChildComponent，将数据作为 prop 传递。

目标是防止在计数状态改变但数据不变时 ChildComponent 重新渲染。

解决方案：

为了防止在计数状态改变但数据保持不变时 ChildComponent 重新渲染，你可以使用 React.memo 来记忆 ChildComponent。

React.memo：这个高阶组件会记住 ChildComponent 的渲染输出。如果传递给 ChildComponent 的数据 prop 没有改变，则当父组件由于其他状态（如计数）的更改而重新渲染时，React.memo 将阻止 ChildComponent 重新渲染。
工作原理：单击“增加计数”按钮时，ParentComponent 中的计数状态将更新。通常，这会导致 ParentComponent 和 ChildComponent 都重新渲染。但是，使用 React.memo，ChildComponent 仅在数据 prop 更改时才会重新渲染。由于数据保持不变，控制台日志“ChildComponent 已渲染”仅出现一次，表明 ChildComponent 不会不必要地重新渲染。

3. 使用 useCallback 防止不必要的重新渲染

问题：您有一个父组件，它将事件处理程序函数作为 prop 传递给子组件。每当父组件重新渲染时，子组件也会重新渲染，因为函数 prop 被重新创建。挑战在于防止子组件在父组件状态改变时不必要地重新渲染。

场景：

在父组件中，有一个计数状态，每次单击“增加计数”按钮时，计数状态都会增加。handleClick 函数作为 prop 传递给 ChildComponent。

即使 ChildComponent 用 React.memo 包装，它仍然会在父组件重新渲染时重新渲染，因为 handleClick 函数每次都是一个新的引用。目标是使用 useCallback 来防止这种不必要的重新渲染。

解决方案：

要阻止 ChildComponent 每次 ParentComponent 重新渲染时重新渲染，请使用 useCallback 来记忆 handleClick 函数。

useCallback：记忆 handleClick，这样它就不会在每次渲染时重新创建。这可确保 ChildComponent 仅在实际 props 发生变化时重新渲染。
React.memo：除非其 props 发生变化，否则防止 ChildComponent 重新渲染。

通过使用 useCallback，handleClick 函数在渲染过程中保留相同的引用，即使父状态（计数）发生变化，也可以防止 ChildComponent 不必要的重新渲染。

结论

要掌握 React，重要的是不仅要了解如何创建组件，还要了解如何使它们高效。本文中的问题——关于更新嵌套状态、停止不必要的重新渲染以及使用 useCallback——专注于解决您在实际 React 项目中可能遇到的常见问题。

学习这些技术将帮助您编写更好、更快、更有效的 React 应用程序，无论您是在准备面试还是希望提高技能，都会对您有一定帮助。

本文链接：http://www.28at.com/showinfo-26-112768-0.html我经常会问应聘者的三个React面试题

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Cookie的secure属性引起循环登录问题分析及解决方案

下一篇：高动态星地链路通信要素及模型研究

标签：

热门焦点

Automa-通过连接块来自动化你的浏览器

1、前言通过浏览器插件可实现自动化脚本的录制与编写，具有代表性的工具就是：Selenium IDE、Katalon Recorder，对于简单的业务来说可快速实现自动化的上手工作。Selenium IDEKat
如何正确使用:Has和:Nth-Last-Child

我们可以用CSS检查，以了解一组元素的数量是否小于或等于一个数字。例如，一个拥有三个或更多子项的grid。你可能会想，为什么需要这样做呢？在某些情况下，一个组件或一个布局可能会
在线图片编辑器，支持PSD解析、AI抠图等

自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在，不知不觉已过去一年时间了，期间我经历了裁员失业、面试找工作碰壁，寒冬下一直没有很好地履行计划.....这些就放在日
微软邀请 Microsoft 365 商业用户，测试视频编辑器 Clipchamp

8 月 1 日消息，微软近日宣布即将面向 Microsoft 365 商业用户，开放 Clipchamp 应用，邀请用户通过该应用来编辑视频。微软于 2021 年收购 Clipchamp，随后开始逐步整合到 Microsof
每天一道面试题-CPU伪共享

前言：了不起：又到了每天一到面试题的时候了！学弟，最近学习的怎么样啊了不起学弟：最近学习的还不错，每天都在学习，每天都在进步！了不起：那你最近学习的什么呢？了不起学弟：最近在学习C
阿里大调整

来源：产品刘有媒体报道称，近期淘宝天猫集团启动了近年来最大的人力制度改革，涉及员工绩效、层级体系等多个核心事项，目前已形成一个初步的“征求意见版”：1、取消P序列
信通院：小米、华为等11家应用商店基本完成APP签名及验签工作

中国信通院表示，目前，小米、华为、OPPO、vivo、360手机助手、百度手机助手、应用宝、豌豆荚和努比亚等9家应用商店，以及抖音和快手2家新型应用分发平
苹果、三星、惠普等暂停向印度出口笔记本和平板电脑

集微网消息，据彭博社报道，在8月3日印度突然禁止在没有许可证的情况下向印度进口电脑/平板及显示器等产品后，苹果、三星电子和惠普等大公司暂停向印度
AI艺术欣赏体验会在上海梅赛德斯奔驰中心音乐俱乐部上演

光影交错的镜像世界，虚实幻化的视觉奇观，虚拟偶像与真人共同主持，这些场景都出现在2019世界人工智能大会的舞台上。8月29日至31日，“AI艺术欣赏体验会”在上海

我经常会问应聘者的三个React面试题

简介

1. 在 React 组件中更新嵌套状态

解决方案：

2. 防止子组件不必要的重新渲染

场景：

解决方案：

3. 使用 useCallback 防止不必要的重新渲染

场景：

解决方案：

结论

Automa-通过连接块来自动化你的浏览器

如何正确使用:Has和:Nth-Last-Child

在线图片编辑器，支持PSD解析、AI抠图等

微软邀请 Microsoft 365 商业用户，测试视频编辑器 Clipchamp

每天一道面试题-CPU伪共享

阿里大调整

信通院：小米、华为等11家应用商店基本完成APP签名及验签工作

苹果、三星、惠普等暂停向印度出口笔记本和平板电脑

AI艺术欣赏体验会在上海梅赛德斯奔驰中心音乐俱乐部上演

最新推荐

猜你喜欢

热门推荐

相关资讯