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

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

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

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

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

标签：

热门焦点

官方承诺：K60至尊版将会首批升级MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版将会搭载天玑9200+处理器和独显芯片X7的同时，Redmi给出了官方承诺，K60至尊重大更新首批升级，会首批推送MIUI 15。也就是说虽然
Redmi Buds 4开箱简评：才199还有降噪可以无脑入

在上个月举办的Redmi Note11T Pro系列新机发布会上，除了两款手机新品之外，Redmi还带来了两款TWS真无线蓝牙耳机产品，Redmi Buds 4和Redmi Buds 4 Pro，此前我们在Redmi Note11T
六大权益！华为8月服务日开启：手机免费贴膜、维修免人工费

8月5日消息，一年一度的华为开发者大会2023（Together）日前在松山湖拉开帷幕，与此同时，华为8月服务日也式开启，到店可享六大专属权益。华为用户可在华为商城Ap
量化指标是与非：挽救被量化指标扼杀的技术团队

作者 | 刘新翠整理 | 徐杰承本文整理自快狗打车技术总监刘新翠在WOT2023大会上的主题分享，更多精彩内容及现场PPT，请关注51CTO技术栈公众号，发消息【WOT2023PPT】即可直接领取
让我们一起聊聊文件的操作

文件【1】文件是什么？文件是保存数据的地方，是数据源的一种，比如大家经常使用的word文档、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存数据，它既可以保
梁柱接棒两年，腾讯音乐闯出新路子

文丨田静出品丨牛刀财经（niudaocaijing）7月5日，企鹅FM发布官方公告称由于业务调整，将于9月6日正式停止运营，这意味着腾讯音乐长音频业务走向消亡。腾讯在长音频领域还在摸索。为
阿里大调整

来源：产品刘有媒体报道称，近期淘宝天猫集团启动了近年来最大的人力制度改革，涉及员工绩效、层级体系等多个核心事项，目前已形成一个初步的“征求意见版”：1、取消P序列
2纳米决战2025

集微网报道从三强争霸到四雄逐鹿，2nm的厮杀声已然隐约传来。无论是老牌劲旅台积电、三星，还是誓言重回先进制程领先地位的英特尔，甚至初成立不久的新
支持aptX Lossless无损传输 iQOO TWS 1赛道版发布限时优惠价369元

2023年7月4日，“无损音质，声动人心”iQOO TWS 1正式发布，支持aptX Lossless无损传输，限时优惠价369元。iQOO TWS 1耳机率先支持端到端aptX Lossless无

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

简介

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

解决方案：

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

场景：

解决方案：

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

场景：

解决方案：

结论

官方承诺：K60至尊版将会首批升级MIUI 15

Redmi Buds 4开箱简评：才199还有降噪可以无脑入

六大权益！华为8月服务日开启：手机免费贴膜、维修免人工费

量化指标是与非：挽救被量化指标扼杀的技术团队

让我们一起聊聊文件的操作

梁柱接棒两年，腾讯音乐闯出新路子

阿里大调整

2纳米决战2025

支持aptX Lossless无损传输 iQOO TWS 1赛道版发布限时优惠价369元

最新推荐

猜你喜欢

热门推荐

相关资讯