407 - 《React 面试题》

1、解释 React 中的 Virtual DOM 是什么

虚拟 DOM（VDOM）是一种编程概念，在这种概念中，「虚拟」的 UI 是存在内存中的，并通过 ReactDOM 等库与「真实」的 DOM 同步。

2、Virtual DOM 和 DOM 有什么区别？

虚拟 DOM 与真实 DOM 的对象基本相同，不同点是虚拟 DOM 是一个轻量级的拷贝。它不能操作 DOM 元素。其主要目的是在内存中对 DOM 元素进行快速计算。

3、什么是 JSX？

JSX 是 JavaScript XML 的简写。他是 React 使用的文件类型，他结合了 JavaScript 的表达能力和类 HTML 的模板语法。

4、当我们谈论在 React 中的渲染时，你理解的是什么？

渲染意味着 React 正在调用你的一个组件。

5、解释 React 中组件的概念

组件是构建 React 应用程序 UI 的模块。这些组件将整个 UI 分割成小的独立且可重用的部分。

6、React 中的 props 是什么，它们与 state 的主要区别是什么？

Props 是 React 中 Properties 的缩写。它们是只读变量，必须保持纯净，即不可变。这有助于维护单向数据流，并通常用于渲染动态生成的数据。与 State 的主要区别在于，props 是不可变的只读变量。

7、你如何更新组件的状态？

在函数组件中，你可以使用 useState 钩子来定义和更新一个状态变量。它返回一个数组，该数组的第一个位置保存状态变量，第二个位置保存设置或更新函数。你可以使用这个函数来更新状态变量，像这样：

setSomeState('some value')

8、什么是合成事件？

合成事件是作为浏览器原生事件跨浏览器包装器的对象。它们将不同浏览器的行为合并到一个 API 中。这样做是为了确保事件在不同浏览器中显示一致的属性。

9、什么是 refs，举一个你用它的例子。

Refs 是 React 中 References 的缩写。它是一个变量，用于保存对一个值的引用。你可以使用 useRef 钩子定义一个引用，它会返回一个引用变量，你可以通过调用 ref.current 键来访问。使用 ref 的例子比如对特定元素执行 DOM 计算。

10、React 的渲染过程是如何？

11、你如何在函数组件中复用逻辑？

可以用 customHooks 存储多个组件中复用数据或逻辑的函数，比如用 useActiveUser() 返回来自用户的所有数据。

12、在 React 中什么是 key，它们的作用是什么？

key 是一个字符串或数字，用于唯一标识一个 React 元素。key 在数组中尤为重要，因为它告诉 React 每个组件对应哪个数组项，以便稍后进行匹配。

如果你的数组项可以移动（例如由于排序）、被插入或被删除，这就变得很重要。一个选得好的 key 可以帮助 React 推断到底发生了什么，并对 DOM 树进行正确的更新。

13、受控组件和非受控组件有什么区别？

受控组件是指其状态和行为由父组件控制的组件。这些组件依赖从父组件传递下来的 props 来更新它们的状态和行为。非受控组件是指内部管理自己状态的组件。

14、解释 React 中服务器端渲染与客户端渲染的主要区别

服务器端渲染（SSR）是指在服务器上完成 React 应用程序的初始渲染。服务器为应用程序的初始状态生成 HTML，并将其发送到浏览器。当 JavaScript 包加载后，React 接管，应用继续作为客户端的 SPA（单页应用程序）运行。

15、在 React 组件中，如何避免不必要的渲染？

这取决于每个用例，但一种技术可能是用 useCallback 或 useMemo 包装组件接收的 props，并且在组件本身上使用 React.memo，以便仅在 props 改变时重新渲染。

另一种思路是检查组件本身的 useEffects，看看是否有不必要的渲染从内部触发。

16、什么是 Portal？可用于什么场景下？

React 有一个内置函数叫做 React.createPortal，它在他调用的组件和 DOM 元素之间创建了一座桥梁，用于将子