2026最新的react面试题

好的，针对你文档中缺失的这些高频、高阶、且符合 2026 年技术趋势的考点，我为你整理了这份中英文双语背诵清单。

这些题目是区分“初级开发”和“资深/全栈开发”的关键。

现代全栈类 (Next.js & Server Components)

5. Server Components vs Client Components: When to use which?

（服务端组件与客户端组件：如何选择？）

• English: Use Server Components by default for data fetching and heavy logic to reduce client-side bundle size. Use Client Components only when you need interactivity (e.g., onClick), browser APIs (e.g., window), or React Hooks (useState, useEffect).
• 中文： 默认优先使用服务端组件 (RSC) 处理数据获取和复杂逻辑，以减少客户端包体积。仅在需要交互（如点击事件）、浏览器 API（如 window）或 React Hooks（如 useState）时使用客户端组件。

6. What is Hydration and why does 'Hydration Mismatch' occur?

（什么是水合以及为什么会发生水合失效？）

• English: Hydration is the process where React attaches event listeners to the static HTML sent by the server. A Mismatch occurs when the initial client-side render doesn't match the server-rendered HTML, often caused by using unstable data like Date.now() or Math.random() during rendering.
• 中文： 水合 (Hydration) 是 React 将事件监听器绑定到服务器发送的静态 HTML 上的过程。水合失效是指客户端首次渲染的结果与服务端 HTML 不一致，通常由渲染中使用不稳定的数据（如时间戳或随机数）引起。

7. How do Server Actions work in React 19 / Next.js 16?

（Server Actions 在 React 19/Next.js 16 中如何工作？）

• English: Server Actions allow you to define asynchronous functions that run on the server but can be called directly from client-side forms or components. Combined with the useActionState hook, they eliminate the need for manual API route creation and handle loading/error states automatically.
• 中文： Server Actions 允许定义在服务端运行但可以直接从客户端表单调用的异步函数。结合 useActionState Hook，它们消除了手动创建 API 路由的需求，并能自动处理加载和错误状态。

性能优化类 (Performance)

8. How to prevent unnecessary re-renders when using Context API?

（如何防止使用 Context 时的不必要渲染？）

• English: To optimize Context, you can: 1. Split the Context into multiple providers (e.g., one for state, one for dispatch). 2. Wrap the child components in React.memo. 3. Pass the UI as children to the provider to use composition.
• 中文： 优化 Context 的方法包括：1. 拆分多个 Provider（如状态和更新逻辑分开）；2. 使用 React.memo 包裹子组件；3. 将 UI 作为 children 传入 Provider，利用组合模式规避渲染。

原理类问题

性能优化与架构 (Optimization)

Diff 算法的局限性： 既然 Diff 是 $O(n)$，为什么在处理跨层级移动节点时，React 会选择直接销毁并重建？

English:

To keep the Diff algorithm at $O(n)$ complexity, React assumes that components at different levels are different. Searching the whole tree for a moved node would be $O(n^3)$. React sacrifices local performance for global speed; it unmounts the old subtree and mounts a new one at the new location.

中文：

为了保持 Diff 算法 $O(n)$ 的复杂度，React 假设不同层级的组件是不同的。在整棵树中搜索移动的节点复杂度将达到 $O(n^3)$。React 牺牲了局部性能来换取整体速度：它会直接卸载旧子树并在新位置挂载新子树。

Keep-Alive 的实现： React 官方目前没有提供类似 Vue 的 <keep-alive>，如果是你，你会如何设计一个能缓存组件状态和 DOM 的方案？

English: Since React doesn't have a built-in Keep-Alive, we can:

1. CSS approach: Use display: none to hide the component without unmounting.
2. Portal approach: Use createPortal to render the component into a "hidden DOM container" in memory, and then "teleport" it back to the visible tree when needed. This preserves both DOM state and React internal state.

中文： 由于 React 没有内置 Keep-Alive，我们可以：

1. CSS 方案：使用 display: none 隐藏组件而不卸载。
2. Portal 方案：使用 createPortal 将组件渲染到内存中的“隐藏 DOM 容器”，并在需要时将其“传送”回可见树。这可以同时保留 DOM 状态和 React 内部状态。

HOC vs Render Props vs Hooks： 随着 React 的演进，这三种逻辑复用模式分别解决了什么问题，又各自带来了什么副作用？

English:

• HOC: Solved logic reuse but caused "Wrapper Hell" and prop name conflicts.
• Render Props: Solved prop naming issues but caused "Callback Hell" in JSX.
• Hooks: Solved both by allowing flat logic reuse without nesting, making code easier to read and test. Side effect: Introduced the complexity of closures and the rules of hooks.

中文：

• HOC：解决了逻辑复用，但导致了“嵌套地狱”和属性名冲突。
• Render Props：解决了属性命名问题，但导致了 JSX 中的“回调地狱”。
• Hooks：通过扁平化的逻辑复用解决了上述问题，无需嵌套。副作用：引入了闭包的复杂性和 Hooks 调用规则的限制。