什么是虚拟 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 来获取它当前的值。