Interview
React 面试题¶
基础知识¶
1. 什么是 React？React 有哪些核心特性？¶
回答要点: React 是一个用于构建用户界面的 JavaScript 库，核心特性包括组件化、虚拟 DOM、单向数据流、声明式编程等。
Answer Key Points: React is a JavaScript library for building user interfaces, with core features including componentization, Virtual DOM, one-way data flow, and declarative programming.
2. 什么是 JSX？它与 HTML 有什么不同？¶
回答要点: JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。与 HTML 不同，JSX 可以嵌入 JavaScript 表达式，并且在编译时被转换为 React.createElement 调用。
Answer Key Points: JSX is a syntax extension for JavaScript that allows writing HTML-like code within JavaScript. Unlike HTML, JSX can embed JavaScript expressions and is compiled into React.createElement calls.
3. React 中的组件有哪些类型？如何选择使用哪种组件？¶
回答要点: 主要有函数组件和类组件两种类型。函数组件用于展示简单的静态内容或使用 Hooks 管理状态和生命周期；类组件适用于需要复杂逻辑或传统生命周期方法的场景。
Answer Key Points: The main types are functional components and class components. Functional components are used for simple, static content or to manage state and lifecycle with Hooks, while class components are suitable for complex logic or traditional lifecycle methods.
状态与属性¶
4. 什么是 Props？什么是 State？它们之间有什么区别？¶
回答要点: Props 是组件的输入，用于从父组件传递数据；State 是组件内部的状态，用于管理动态数据。Props 是不可变的，而 State 可以在组件内部修改。
Answer Key Points: Props are the inputs to a component, used to pass data from a parent component; State is the internal status of a component used to manage dynamic data. Props are immutable, while State can be modified within the component.
5. React 中的状态提升 (State Lifting) 是什么？¶
回答要点: 状态提升指的是将多个子组件需要共享的状态提升到它们的共同父组件中，以便通过 props 传递状态和回调函数，从而实现共享状态。
Answer Key Points: State lifting refers to moving shared state up to the closest common parent component, allowing it to be passed down as props along with callback functions to achieve shared state.
生命周期与 Hooks¶
6. 类组件中常用的生命周期方法有哪些？¶
回答要点: 常见的生命周期方法包括 componentDidMount、componentDidUpdate、componentWillUnmount，分别用于组件挂载后、更新后和卸载时的操作。
Answer Key Points: Common lifecycle methods include componentDidMount, componentDidUpdate, and componentWillUnmount, used for actions after the component mounts, updates, and unmounts, respectively.
7. 请解释 React 中的 useEffect Hook 及其用途。¶
回答要点: useEffect 是一个用于在函数组件中处理副作用的 Hook，比如数据获取、订阅、手动 DOM 操作等。它可以在组件渲染后运行，并在依赖项变化时重新执行。
Answer Key Points: useEffect is a Hook used in functional components to handle side effects such as data fetching, subscriptions, and manual DOM operations. It runs after the component renders and re-runs when dependencies change.
8. React 中的 useState 是如何工作的？¶
回答要点: useState 是一个 Hook，用于在函数组件中声明状态变量。它返回一个状态值和一个用于更新状态的函数，组件重新渲染时，useState 保留状态值。
Answer Key Points: useState is a Hook used in functional components to declare state variables. It returns a state value and a function to update the state, and it retains the state value across re-renders.
性能优化¶
9. 如何避免 React 中的不必要渲染？¶
回答要点: 可以使用 React.memo、shouldComponentUpdate、useMemo 和 useCallback 等技术来避免不必要的渲染，提升性能。
Answer Key Points: Techniques like React.memo, shouldComponentUpdate, useMemo, and useCallback can be used to avoid unnecessary rendering and improve performance.
10. 如何处理 React 应用中的性能瓶颈？¶
回答要点: 通过代码分割、懒加载、使用生产模式构建、优化图片和资源、使用 React.lazy 和 Suspense 实现组件的按需加载，以及使用 Profiler 来检测性能问题。
Answer Key Points: By using code splitting, lazy loading, building in production mode, optimizing images and resources, using React.lazy and Suspense for component lazy loading, and employing Profiler to detect performance issues.
高级概念¶
11. 什么是高阶组件 (Higher-Order Component, HOC)？如何使用？¶
回答要点: HOC 是一个函数，它接收一个组件并返回一个新组件。HOC 用于复用组件逻辑，比如权限控制、增强功能等。
Answer Key Points: HOC is a function that takes a component and returns a new component. HOCs are used to reuse component logic, such as for authorization control or feature enhancement.
12. 请解释 React 中的 Context API 及其应用场景。¶
回答要点: Context API 用于在组件树中共享全局数据，而不需要逐层通过 props 传递。常用于主题切换、用户认证等场景。
Answer Key Points: Context API is used to share global data across the component tree without passing props at every level. It is commonly used for themes, user authentication, and similar scenarios.
13. React 中如何实现代码分割？¶
回答要点: 通过使用 React.lazy 和 Suspense 来动态加载组件，可以实现按需加载，从而减少初始加载时间。也可以使用 Webpack 的 import() 动态引入模块。
Answer Key Points: By using React.lazy and Suspense to dynamically load components, on-demand loading can be achieved, reducing initial load time. Webpack's import() can also be used for dynamic module imports.
其他相关技术¶
14. React Router 是什么？如何使用它实现路由功能？¶
回答要点: React Router 是一个用于处理单页面应用中路由的库。可以使用 BrowserRouter、Route、Link 等组件来定义和管理应用的路由。
Answer Key Points: React Router is a library for handling routing in single-page applications. Components like BrowserRouter, Route, and Link are used to define and manage application routes.
15. 什么是 Redux？它与 React 有何关联？¶
回答要点: Redux 是一个状态管理库，常与 React 结合使用。它通过单一的状态树管理应用状态，提供了可预测的状态管理方式，结合 react-redux 可以方便地将 Redux 集成到 React 中。
Answer Key Points: Redux is a state management library often used with React. It manages application state via a single state tree, providing a predictable way of managing state, and can be easily integrated into React using react-redux.