React面试高频核心问题

基础部分

React的核心特性是什么？
- 组件化（基于组件）
- 单向数据流（单向数据流）
- 虚拟 DOM（Virtual DOM）
- JSX（JavaScript XML）

React的生命周期方法有哪些？ React 16.3以后分为三类：

悬挂阶段：constructor→ render→componentDidMount
更新阶段：shouldComponentUpdate→ render→ getSnapshotBeforeUpdate→componentDidUpdate
维护阶段：componentWillUnmount

图解寿命：

┌────────────────────────────┐
│  Mounting                 │
└─────┬──────────┬──────────┘↓          ↓render   componentDidMount↑          ↑└── Updating Phase

什么是 JSX？为什么需要它？ JSX 是 JavaScript 的语法扩展，用于描述 UI 的结构。例子：
```
const element = <h1>Hello, world!</h1>;
```

如何在React中绑定事件？

使用onClick等内置事件绑定。示例：

function App() {const handleClick = () => alert("Clicked!");return <button onClick={handleClick}>Click Me</button>;
}

React中的状态（State）和属性（Props）有什么区别？
- State：组件内可变的状态。
- Props：父组件传递的数据，仅供参考。

进阶部分

如何提升状态（State Lifting）？ 当多个组件需要共享状态时，可以将状态提升到它们的最近的公共父组件。例子：

function Parent() {const [count, setCount] = React.useState(0);return (<><ChildA count={count} /><ChildB onIncrement={() => setCount(count + 1)} /></>);
}

React 的虚拟 DOM 是如何工作的？

React 使用 Virtual DOM 进行优化。
- 比较新旧虚拟 DOM 树（Diffing）。
- 生成最小的真实DOM更新。

图解：

Actual DOM       Virtual DOM
┌──────┐          ┌──────┐
│ div  │          │ div  │
└──────┘          └──────┘

什么是 React Hooks？常见的 Hooks 有哪些？
- Hooks是函数式组件使用状态和生命周期的方法。
- 常见 Hooks:
  - useState：管理状态
  - useEffect：傷口處理
  - useContext：环境管理
例子：
```
function Counter() {const [count, setCount] = React.useState(0);return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

React 的 Context 是如何工作的？

Context 提供全局数据共享(子孙）。示例：

const ThemeContext = React.createContext("light");
function App() {return (<ThemeContext.Provider value="dark"><Child /></ThemeContext.Provider>);
}
function Child() {const theme = React.useContext(ThemeContext);return <div>{theme}</div>;
}

什么是高层组件（HOC）？

高阶组件是接受组件参数作为，返回新组件的函数。示例：

function withLogger(WrappedComponent) {return function (props) {console.log("Rendered with props:", props);return <WrappedComponent {...props} />;};
}

高阶部分

如何优化React应用性能？
- 使用React.memo或useMemo。
- 分割代码（Code Splitting）。
- 避免不必要的重渲染。
代码示例：
```
const MemoizedComponent = React.memo(Component);
```

如何处理组件的边界错误？

使用componentDidCatch和getDerivedStateFromError。例子：

class ErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError() {return { hasError: true };}render() {return this.state.hasError ? <h1>Error!</h1> : this.props.children;}
}

React中如何实现懒加载？ 使用React.lazy和Suspense。例子：

const LazyComponent = React.lazy(() => import("./MyComponent"));
function App() {return (<React.Suspense fallback={<div>Loading...</div>}><LazyComponent /></React.Suspense>);
}

什么是和解？
- React 通过对比新旧 Virtual DOM 实现 UI 的高效更新。
如何在React中实现SSR？ 使用Next.js或ReactDOMServer提供的服务端渲染工具。

____________________________________________________________________________

Detailed

基础部分

1. React的核心特性是什么？

React是一个用于构建用户界面的JavaScript库，其核心特性有：

组件化：将页面拆分为可复用的独立组件，简化了代码维护和开发。
单向数据流：数据从组件流向子组件，基于父数据的变化。
Virtual DOM：React 使用轻量的虚拟 DOM 来减少真实 DOM 操作，从而提升性能。
JSX：一种让 HTML 和 JavaScript 结合的语法，除去结构的解读性，还有逻辑的灵活。

2. React的生命周期方法有哪些？

React组件从创建到推理，经历一系列生命周期阶段：

挂载阶段：组件首次被创建和插入 DOM 的过程。
更新阶段：当组件的状态或属性发生变化时会重新渲染。
卸载阶段：组件从 DOM 中移除的过程。

3. 什么是 JSX？为什么需要它？

JSX 是 JavaScript 的语法扩展，它看起来像 HTML，但本质上会被转换成React.createElement调用。与直接操作 DOM 或传统模板语言相比，JSX 更加直观，而且与 JavaScript 无缝结合。

4. React 的 State 和 Props 有什么区别？

状态：
- 用于存储组件内部的动态数据。
- 由组件自身维护，其他组件无法直接修改。
道具：
- 用于在组件间传递数据。
- 父组件通过属性将数据传递给子组件，异步，子组件无法修改。

举个例子：State是组件自己的电池，Props则像快递中的数据包。

进阶部分

5. React 的虚拟 DOM 是如何工作的？

Virtual DOM 是 React 的核心优化技术。它是对 True DOM 的抽象表示。React 将组件的 UI 结构保存在内存中，并通过以下步骤优化渲染：

比较：对比旧的虚拟 DOM 和新的虚拟 DOM，找到差异。
更新：生成最小的操作集，只修改需要变化的部分，而不是整个 DOM。
高效操作：减少真实 DOM 操作的次数，提高渲染性能。

6.什么是 React Hooks？

React Hooks 是一种让函数组件可以使用状态、生命周期方法的新方式。传统的类虽然组件功能强大，但往往因为复杂的生命周期宏观管理而繁琐。Hooks 提供了更简洁的写法。

useState：为函数组件提供状态管理。
useEffect：代替生命周期方法，管理副作用（如数据获取、订阅）。
useContext：简化全局状态的共享。

7. React 的 Context 是什么？为什么需要它？

Context 是 React 提供的一个全局状态管理工具，适合需要在组件树中梯度数据传递的场景。它可以避免“Prop Drilling”（属性逐层传递）的问题。通过 Context，父组件可以将数据直接传递给精致的子组件，而分散经过中间。

适用场景包括：

主题切换（深刻组件获取当前主题颜色）。
用户身份信息共享（如当前登录用户的信息）。
国际化设置。

8. 什么是高阶组件（HOC）？

高阶组件是一种增强组件的设计模式。它是一个组件接受作为参数，返回一个新组件的函数。HOC 的本质是通过包装组件，添加额外的逻辑或功能。常见场景：

日志记录：在组件每次渲染时记录日志。
权限控制：检查用户是否有访问某个组件的权限。
数据注入：向组件提供额外的上下文或API数据。

高阶部分

9. 如何优化React应用的性能？

React 性能优化的核心目标是减少不必要的渲染和 DOM。以下是一些常见的方法：

避免不必要的渲染：使用React.memo或shouldComponentUpdate阻止组件在数据未变化时重新渲染。
代码分割：通过工具（如Webpack或React.lazy）对组件进行辅助加载，减少最终加载时间。
键值优化：为列表中的每一项提供唯一的key，帮助 React 更高效地管理 DOM 更新。

10. React 的错误边界是什么？

错误边界是一种 React 组件，专门用于捕获其子组件树中的错误（并非自身的错误）。当子组件发生错误时，错误边界组件可以优雅地显示一个错误提示页面，而不会导致整个应用崩溃了。

11. React 的协调机制是什么？

Reconciliation 是 React 用于决定如何更新 UI 的过程。当状态或属性改变时，React 会对比当前的 Virtual DOM 和更新后面的 Virtual DOM，找出误差，并生成最小的 DOM 更新操作。这种算法基于以下优化：策略

分层更新：假设同一性的节点结构保持一致。
唯一标识：通过key来高效定位节点。

12. React中如何实现懒加载？

懒加载是一种优化加载性能的技术，只需在组件实际需要的时候才加载对应的代码。React 提供了内置的工具React.lazy和Suspense，通过二次加载组件代码来减少初始页面加载的时间。常见场景包括：

动态加载。
大型图片或图表延迟加载。

核心思想

React 的核心思想围绕着如何高效地构建用户界面（UI），并简化开发者的工作流。以下是 React 核心思想的详细解析，包括其背景、特性、设计哲学以及实现方式。

1. 声明式编程 vs. 命令式编程

声明式

React 的一个重要理念是声明式编程。开发者只需描述界面在某一状态下应该是什么样子，而不需要手动操作 DOM 或处理状态的更新细节。
好处：
- 简化了复杂的交互逻辑。
- 让代码更易读、易维护。

示例：

传统命令式编程：通过 DOM API 手动更新按钮文本。
React 声明式编程：直接声明当状态为 true 时按钮显示“ON”，否则显示“OFF”。

2. 组件化

React 的另一个核心思想是将 UI 拆分为独立的、可复用的组件。

每个组件是一个独立的功能单元，既可以拥有自己的状态，也可以通过属性（Props）与其他组件协作。
组件化的优点：
1. 复用性：可以在不同页面或项目中复用组件，减少重复代码。
2. 分离关注点：开发者可以专注于实现某个组件的功能，而不必同时考虑整个应用。
3. 组合性：可以通过组合多个组件来构建复杂的 UI。

例子：一个网站的页面可以分解为：