React 18 常见面试题及解答

---

React 18 常见面试题及解答

1. React 18 带来了哪些主要的新特性？

回答：
React 18 引入了几个重要特性：

• 并发渲染（Concurrent Rendering）：通过时间切片（Time Slicing）和优先级调度，优化了渲染性能，用户交互更流畅。
• 新的根 API（Root API）：ReactDOM.createRoot 替代了 ReactDOM.render，支持并发特性。
• 自动批处理（Automatic Batching）：React 18 默认对所有状态更新进行批处理（包括异步操作），减少不必要的重新渲染。
• Suspense 改进：对服务器端渲染和数据获取的支持更强大。
• 新 Hook：如 useId（生成唯一 ID）、useSyncExternalStore（与外部状态同步）等。

扩展： 面试中可能会要求举例说明并发渲染如何提升性能，可以提到它允许 React 在渲染过程中暂停和恢复任务。

---

2. 什么是并发渲染？它与之前的渲染方式有何不同？

回答：
并发渲染是 React 18 的核心特性，它允许 React 在渲染时根据任务优先级中断和恢复工作，而不是一次性完成所有渲染。

• 之前（React 17 及以下）：同步渲染，任务不可中断，可能导致 UI 卡顿。
• React 18：异步、可中断，优先处理高优先级任务（如用户输入），提升用户体验。
  例如，startTransition API 可以标记低优先级更新，避免阻塞主线程。

扩展： 可以结合 useTransition Hook 举例，展示如何优化大数据列表的加载。

---

3. React 18 的自动批处理是如何工作的？

回答：
自动批处理是 React 18 的优化特性，它将多个状态更新合并为一次重新渲染，即使这些更新发生在异步代码中。

• React 17：只有在事件处理函数中的同步更新才会被批处理，异步更新（如 setTimeout 或 Promise）会导致多次渲染。
• React 18：无论同步还是异步，所有状态更新默认批处理。
  示例：

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);
// React 18：一次渲染；React 17：两次渲染

---

4. useTransition Hook 的作用是什么？如何使用？

回答：
useTransition 是 React 18 引入的新 Hook，用于标记非紧急的状态更新，避免阻塞紧急更新（如用户输入）。

• 返回一个数组：[isPending, startTransition]。
• isPending：表示过渡状态是否进行中。
• startTransition：包裹低优先级更新。
  示例：

const [isPending, startTransition] = useTransition();
const handleClick = () => {
  startTransition(() => {
    setList(newLargeList); // 低优先级更新
  });
};

场景： 搜索框输入时，实时更新输入框（高优先级），延迟渲染搜索结果（低优先级）。

---

5. React 18 的新 Root API 有什么变化？

回答：
React 18 废弃了 ReactDOM.render，改为 ReactDOM.createRoot：

• 旧方式：

import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

• 新方式：

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

原因： 新 API 解锁了并发渲染特性，同时为未来的功能扩展提供了支持。

---

6. 如何在 React 18 中优化性能？

回答：
React 18 提供了多种性能优化方式：

• 使用并发特性：如 useTransition 和 startTransition，区分紧急和非紧急更新。
• Suspense 和延迟加载：结合 <Suspense> 和 lazy 动态加载组件。
• 避免不必要的渲染：利用 React.memo 和 useMemo/useCallback。
• 服务端渲染优化：使用 Suspense 和流式渲染（Streaming SSR）。

扩展： 可以结合实际案例，比如优化一个复杂表单的渲染。

---

7. useId Hook 的作用是什么？

回答：
useId 是 React 18 引入的 Hook，用于生成唯一的 ID，特别适用于服务端渲染和客户端渲染一致性。

• 用法：

const id = useId();
return <input id={id} />;

• 优点：避免手动生成 ID 的冲突问题，支持 hydration（水合）场景。

---

8. React 18 的 Suspense 可以用来做什么？

回答：
Suspense 在 React 18 中得到了增强，可以用于：

• 延迟加载组件：配合 React.lazy。
• 数据获取：结合支持 Suspense 的库（如 Relay），在组件渲染前等待数据。
• 服务端渲染：支持流式渲染，逐步加载内容。
  示例：

const LazyComponent = React.lazy(() => import('./Component'));
<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

---

9. React 18 中如何处理副作用？

回答：
副作用主要通过 useEffect 和 useLayoutEffect 处理：

• useEffect：异步执行，适合大多数副作用场景，支持并发特性。
• useLayoutEffect：同步执行，适合需要在 DOM 更新后立即操作的场景。
  React 18 中，useEffect 的执行时机可能因并发渲染而调整，但开发者无需特别处理，通常保持一致性。

---

10. 你能解释一下 React 18 的 hydration 过程吗？

回答：
Hydration 是将服务端渲染的静态 HTML 与客户端的 React 组件绑定并激活的过程。React 18 改进了 hydration：

• 支持部分 hydration：通过 Suspense，可以选择性地激活页面部分。
• 流式渲染：服务端可以逐步发送 HTML，客户端边接收边 hydration。
  这提高了页面加载速度和用户体验。

---

总结

以上是 React 18 常见的面试题，涵盖了新特性、性能优化和实际应用场景。