《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。
一、本文面试题目录
以下是10道React面试题及详细答案：
1. React的核心特性有哪些？
React的核心特性包括组件化、虚拟DOM、单向数据流和JSX。具体如下：
- 组件化：将UI拆分成独立可复用的组件，便于代码维护和管理，提高开发效率。例如，一个电商应用可拆分为商品列表组件、购物车组件等。
- 虚拟DOM：React维护一个轻量级的DOM副本，当状态或props变化时，先更新虚拟DOM，再通过diff算法计算差异，最后将差异应用到实际DOM，减少不必要的DOM操作，提升性能。
- 单向数据流：数据通过props从父组件流向子组件，保证数据流动可预测，使组件状态更易理解和调试。子组件不能直接修改props，只能通过回调函数让父组件更新状态。
-
JSX：是JavaScript的语法扩展，允许在JavaScript中编写类似HTML的代码，直观描述UI结构，还可嵌入JavaScript表达式。如
<div>{count > 10? '大于10' : '小于等于10'}</div>。
2. 什么是JSX？它与HTML有什么区别？
JSX是JavaScript XML的简写，是React使用的一种语法扩展，允许在JavaScript中编写类似HTML的代码。它与HTML的区别如下：
-
支持嵌入表达式：JSX中可直接嵌入JavaScript表达式，如
<div>{1 + 1}</div>，HTML则不行。 -
属性命名：JSX标签属性使用驼峰命名法，如
className，而HTML中是class。 -
编译方式：JSX最终会被编译为
React.createElement调用，生成React元素，HTML是由浏览器直接解析渲染。
3. React中的组件有哪些类型？
React中的组件主要有以下类型：
- 函数组件：使用JavaScript函数定义，简洁轻便，支持Hooks，可实现状态管理和副作用操作。如：
import React from'react';
const MyFunction***ponent = () => {
return <div>这是一个函数组件</div>;
};
export default MyFunction***ponent;
-
类组件：使用ES6类定义，可使用生命周期方法，如
***ponentDidMount等。如：
import React, { ***ponent } from'react';
class MyClass***ponent extends ***ponent {
render() {
return <div>这是一个类组件</div>;
}
}
export default MyClass***ponent;
- Pure***ponent：类组件的优化版本，自动对props和state进行浅比较，若未发生变化则阻止组件重新渲染，提高性能。
4. 什么是props和state？它们的区别是什么？
props是父组件传递给子组件的数据，用于组件间通信，是只读的，子组件不能修改。state是组件内部管理的状态，可根据用户交互或其他事件进行修改，用于控制组件的渲染和行为。
它们的区别在于：
- 数据来源：props来自父组件，state是组件自身内部维护。
-
可修改性：props不可在子组件中修改，state可通过
setState（类组件）或useState钩子（函数组件）更新。 - 作用：props主要用于传递数据和配置，让子组件根据不同数据展示不同内容；state用于记录组件内部变化的数据，驱动组件重新渲染。
5. React中的事件处理与原生DOM事件有什么区别？
React中的事件处理与原生DOM事件有以下区别：
-
事件类型命名：React事件采用驼峰命名法，如
onClick，原生DOM事件是小写字母，如onclick。 -
事件机制：React事件是合成事件（SyntheticEvent），是对原生事件的封装，具有更好的跨浏览器兼容性，且在冒泡阶段统一处理，委托到最外层的
document上。 -
绑定方式：React中通过将事件处理函数作为属性传递给组件来绑定事件，原生DOM可通过
addEventListener等方法绑定。
6. 什么是React Hooks？常用的Hooks有哪些？
React Hooks是React 16.8引入的特性，允许在函数组件中使用状态和生命周期方法等功能，无需编写类组件。常用的Hooks有：
- useState：用于在函数组件中添加状态，返回一个包含当前状态值和更新状态函数的数组。如：
import React, { useState } from'react';
const My***ponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>计数: {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
};
export default My***ponent;
- useEffect：用于处理副作用，如数据获取、订阅、手动DOM操作等。可根据依赖项数组控制执行时机。
- useReducer：用于复杂状态管理，类似Redux中的reducer，通过dispatch动作来更新状态。
- useMemo：用于缓存计算结果，避免重复计算，提高性能。
- useCallback：用于缓存回调函数，防止因组件重新渲染导致的函数重新创建。
7. useEffect的依赖项数组有什么作用？
useEffect的依赖项数组用于控制useEffect钩子的执行时机。具体如下：
-
空数组：
useEffect(() => { /* 代码 */ }, [])，此时useEffect只在组件挂载和卸载时执行，常用于初始化数据获取、添加订阅等操作，避免重复执行。 -
有依赖项：如
useEffect(() => { /* 代码 */ }, [dependency])，当依赖项dependency的值发生变化时，useEffect会重新执行，可用于根据某些数据变化来更新副作用操作。 -
无依赖项数组：
useEffect(() => { /* 代码 */ })，这种情况下useEffect会在每次组件渲染后都执行，可能导致性能问题，一般较少使用。
8. React中的Context API有什么作用？有哪些优缺点？
Context API用于在组件树中共享全局数据，避免了通过层层传递props的繁琐操作。例如，可用于共享主题设置、用户登录信息等全局数据。
其优点是：
- 方便在深层次组件中获取全局数据，减少中间组件传递props的代码量。
- 可实现全局数据的集中管理和更新。
缺点是：
- 如果数据发生变化，所有使用该Context的组件都会重新渲染，可能导致不必要的性能开销。
- 容易导致数据滥用，使组件之间的耦合度增加，不利于代码维护和理解。
9. 什么是高阶组件（HOC）？它的用途是什么？
高阶组件（Higher-Order ***ponents，HOC）是一个函数，它接受一个组件作为参数，并返回一个新的组件。
其用途主要有：
- 代码复用：将多个组件的公共逻辑提取到HOC中，避免重复代码。如多个组件都有权限验证逻辑，可创建一个权限验证的HOC。
- 逻辑抽象：可以将一些复杂的逻辑，如数据获取、日志记录等，从组件中分离出来，使组件更专注于UI展示。
- 增强组件功能：为组件添加新的属性或方法，或修改组件的渲染结果。例如，给组件添加一个打印日志的功能。
10. React中如何实现代码分割（Code Splitting）？
在React中，可以使用动态导入（Dynamic Import）和React.lazy结合Suspense来实现代码分割。代码分割可以将大型代码文件拆分成多个小块，按需加载，提高初始加载性能。
示例代码如下：
import React, { Suspense } from'react';
const Lazy***ponent = React.lazy(() => import('./Lazy***ponent'));
const App = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Lazy***ponent />
</Suspense>
</div>
);
};
export default App;
上述代码中，React.lazy接收一个动态导入函数，该函数会在需要渲染Lazy***ponent时才加载其代码。Suspense组件用于在组件加载过程中显示加载提示Loading...。
