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

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

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

导读简介在面试 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属性引起循环登录问题分析及解决方案

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

标签：

热门焦点

Find N3入网：最高支持16+1TB

OPPO将于近期登场的Find N3折叠屏目前已经正式入网，型号为PHN110。本次Find N3在外观方面相比前两代有很大的变化，不再是小号的横向折叠屏，而是跟别的厂商一样采用了较为常见的
6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

2023年上半年已经正式过去了，我们也迎来了安兔兔V10版本，在新的骁龙8Gen3和天玑9300发布之前，性能榜的榜单大体会以骁龙8Gen2和天玑9200+为主，至于那颗3.36GHz的骁龙8Gen2领先
轿车从天而降电动车主被撞身亡超速抢道所致：现场视频让网友吵翻

近日，上海青浦区法院判决轿车从天而降电动车主被撞身亡案，轿车车主被判有期徒刑一年。案件显示当时男子驾驶轿车在上海某路段行驶，前车忽然转弯提速超车，
0糖0卡0脂旭日森林仙草乌龙茶优惠：15瓶到手29元

旭日森林无糖仙草乌龙茶510ml*15瓶平时要卖为79.9元，今日下单领取50元优惠券，到手价为29.9元。产品规格：0糖0卡0脂，添加草本仙草汁，清凉爽口，富含茶多酚，保留
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
2纳米决战2025

集微网报道从三强争霸到四雄逐鹿，2nm的厮杀声已然隐约传来。无论是老牌劲旅台积电、三星，还是誓言重回先进制程领先地位的英特尔，甚至初成立不久的新
iQOO Neo8系列或定档5月23日：首发天玑9200+ 安卓跑分王者

去年10月，iQOO推出了iQOO Neo7系列机型，不仅搭载了天玑9000+，而且是同价位唯一一款天玑9000+直屏旗舰，一经上市便受到了用户的广泛关注。在时隔半年后，
OPPO K11评测：旗舰级IMX890加持 2000元档最强影像手机

【Techweb评测】中端机型用户群体巨大，占了中国目前手机市场的大头，一直以来都是各手机品牌的“必争之地”，其中OPPO K系列机型一直以来都以高品质、
2022爆款：ROG魔霸6 冰川散热系统持续护航

喜逢开学季，各大商家开始推出自己的新产品，进行打折促销活动。对于忠实的端游爱好者来说，能够拥有一款梦寐以求的笔记本电脑是一件十分开心的事。但是现在的

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

简介

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

解决方案：

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

场景：

解决方案：

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

场景：

解决方案：

结论

Find N3入网：最高支持16+1TB

6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

轿车从天而降电动车主被撞身亡超速抢道所致：现场视频让网友吵翻

0糖0卡0脂旭日森林仙草乌龙茶优惠：15瓶到手29元

ESG的面子与里子

2纳米决战2025

iQOO Neo8系列或定档5月23日：首发天玑9200+ 安卓跑分王者

OPPO K11评测：旗舰级IMX890加持 2000元档最强影像手机

2022爆款：ROG魔霸6 冰川散热系统持续护航

最新推荐

猜你喜欢

热门推荐

相关资讯