你需要知道的 12 道 React 面试题

简介: 你需要知道的 12 道 React 面试题

什么是虚拟 DOM?


虚拟 DOM 是一个概念,它将真实 DOM 以对象的形式保存在内存中,并通过像 ReactDOM 之类的库和真实 DOM 同步。

虚拟 DOM 是表示真实 DOM 的对象。由于 DOM 更新是任何一个 Web 应用都不可或缺的部分,但它也是前端中性能消耗最高的操作之一,所以虚拟 DOM 的作用就是检查应用中需要更新的部分并且只更新这一部分,从而提高性能。


我们为什么需要编译 React 代码?


React 代码是使用 JSX 语法编写的,但是没有任何一个浏览器可以直接运行 JSX 代码,它们是一种便于编写和阅读的 JavaScript 扩展。

所以,我们需要使用像 Babel 这类工具将 JSX 转换为原始的 JavaScript 代码,来让浏览器执行它。


key 在 React 中有什么意义?


在 React 中,key 的作用是用于标识唯一的 VDOM 以及驱动 UI 的数据。通过标记,有助于 React 通过回收现有的 DOM 来优化渲染。

key 帮助 React 来识别列表中哪些元素是新增的、修改的以及删除的,让 React 能够最大程度重用已经存在的 DOM,从而提高性能。


ref 在 React 中有什么意义?


在 React 中,ref 是在多轮 render 中持久化数据的变量,和 state 变量类似。但和 state 变量不同的是,更新 ref 不会导致组件重新渲染。

ref 通常用于存储对 DOM 元素的引用。


React 项目中设置样式的常用方法有哪些?

className


React 提供了最基本的 className,和在 HTML 中为 DOM 设置 class 基本一致,只不过将 class 改成了 className。目前这种方案最流行的库是 tailwindcss。


内联样式


React 组件也可以设置 style,但它的值是一个对象。这也是一种非常简单的方式。但缺点是某些样式功能不适用于内联样式,比如一些伪类。


预处理器


常见的预处理器有 Sass、Stylus 和 Less。它们都可以很好的和 React 进行集成,也都非常被开发者欢迎。


CSS in JS 库


React 中最流行的样式方案无疑是 CSS-in-JS。代表库有 styled-components、Emotion 和 Styled-jsx。它们的优势是和 React 进行了更加紧密的集成。它们可以在运行时根据 React 的 props 进行动态修改。


什么是 Props 透传?


在开发过程中,有时我们需要将高层级中的 props 传递到深层级的组件。为了实现组件间的数据传递,我们需要从源组件开始逐一向下一级组件传递 props,直到将 props 传递到目标组件。

这种方式的缺点是让很多原本不应该知道数据的组件可以访问数据,导致代码变得很难维护。

最佳实践是使用 Context API 或者 Redux 这类状态管理库。


什么是严格模式?为什么需要它?


严格模式是 React 的一个组件,用来暴露组件中的潜在问题。在开发模式下,React 的所有问题都会输出到控制台。但是在生产模式下,这些警告都会消失。

使用严格模式可以发现像某些被弃用的生命周期等问题,以确保所有的 React 组件是遵循当前的最佳实践开发的。

严格模式可以用在整个应用的任何一个组件上,所以它可以被逐步采用。


什么是事件合成?


事件合成是将不同浏览器的原生事件的响应合并到一个 API 中,以此来确保事件在不同的浏览器中可以保持一致。


直接修改 state 的值会出现什么情况?


直接修改 state 的值,会导致状态发生了变化,但是没有同步更新 UI 状态。所以尽量只使用 setState 来修改值。


portals 的作用是什么?


React 的组件很难将子组件渲染到付组件之外,但确实有这种情况。portals 就是为了这种情况而生的。有一些组件需要这个 API,比如全局对话框、点击外部事件等。


React 有哪些性能优化策略?

useMemo & useCallback


useMemo 是 React 的一个 Hooks,用来缓存计算结果。在不使用 useMemo 的情况下,当组件重新渲染时,会重复计算渲染所用到的值,可能会导致渲染缓慢。

useMemo 可以缓存这些值,只有当某些 state 变化后,才会重新计算结果。这样可以最大程度降低额外的计算。

useCallback 也可以实现类似的效果,它的作用是缓存函数。


按需加载


按需加载是一项非常常见但有效的减少 React 应用加载时间的技术。只有当用户浏览到组件时,才会加载这个组件。


什么是受控组件和非受控组件?


每个状态变化都对应一个关联的处理函数的组件就是受控组件。

不受控组件是在内部存储自己的状态的组件,我们需要访问内部状态时,需要通过 ref 来查询 DOM 来获取它当前的值。



相关文章
|
JSON 缓存 前端开发
【React】React原理面试题集锦
本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
543 0
|
缓存 前端开发 JavaScript
React常见面试题(2024最新版)
React常见面试题(2024最新版)
570 1
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
538 2
|
前端开发 JavaScript
一文详解React事件中this指向,面试必备
一文详解React事件中this指向,面试必备
434 0
|
存储 缓存 前端开发
【React】Hooks面试题集锦
本文集合一些React的Hooks面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
845 1
|
缓存 前端开发 JavaScript
React 面试题2
React 面试题2
343 0
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
|
存储 缓存 算法
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
本文介绍了多线程环境下的几个关键概念,包括时间片、超线程、上下文切换及其影响因素,以及线程调度的两种方式——抢占式调度和协同式调度。文章还讨论了减少上下文切换次数以提高多线程程序效率的方法,如无锁并发编程、使用CAS算法等,并提出了合理的线程数量配置策略,以平衡CPU利用率和线程切换开销。
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
|
存储 缓存 Java
大厂面试必看!Java基本数据类型和包装类的那些坑
本文介绍了Java中的基本数据类型和包装类,包括整数类型、浮点数类型、字符类型和布尔类型。详细讲解了每种类型的特性和应用场景,并探讨了包装类的引入原因、装箱与拆箱机制以及缓存机制。最后总结了面试中常见的相关考点,帮助读者更好地理解和应对面试中的问题。
490 4