第 3 卷

1. React 会在合成事件冒泡阶段，按照 React 组件树的层级，从触发事件的组件开始，向上遍历组件

树，依次执行组件上注册的合成事件回调函数（即合成事件冒泡）。

1. 事件回调函数执行完成后，React 会立即回收合成事件对象（复用合成事件对象，提升性能），因

此在异步回调中无法访问合成事件对象（如需访问，需调用 e.persist() 方法保留事件对象）。

1. 若回调函数中触发了 setState，React 会进行批量更新，待所有合成事件回调执行完成后，统

一执行协调和渲染流程。

五、React.Component 与 React.PureComponent 的区别

React.Component（普通类组件）和 React.PureComponent（纯类组件）均是 React 类组件的基类，核心区别在于是否自动实现了浅比较（Shallow Comparison）的

shouldComponentUpdate 方法，具体差异如下：

1. 核心区别：shouldComponentUpdate 方法

• React.Component：默认没有实现 shouldComponentUpdate 方法，该方法默认返回

true。这意味着，无论组件的 props 或 state 是否发生变化，只要父组件重新渲染，或者组件自身调用 setState（即使传入相同的状态值），该组件都会触发重新渲染（包括自身

render 方法执行、子组件重新渲染），可能导致不必要的性能开销。

◦ 若需优化性能，开发者需手动实现 shouldComponentUpdate 方法，手动对比

nextProps 与 this.props、 nextState 与 this.state 的差异，返回 true （需要渲染）或 false（不需要渲染）。

• React.PureComponent：自动实现了 shouldComponentUpdate 方法，该方法内部会对

props 和 state 进行浅比较（Shallow Compare）：

1. 浅比较规则：先比较引用类型的引用地址（若 props / state 是对象/数组，仅比较是否指

向同一个内存地址，不深入对比对象内部属性），再比较基本类型的值（如数字、字符串）。

1. 只有当浅比较发现 props 或 state 发生变化时， shouldComponentUpdate 才返回

true，触发组件重新渲染；若浅比较发现无变化，则返回 false，阻止组件不必要的重新渲染，优化性能。

2. 其他补充差异

1. 使用场景：

◦ React.Component：适用于所有类组件场景，尤其是组件的 props 或 state 为复杂嵌套

◦ React.PureComponent：适用于组件的 props 和 state 均为基本类型，或为简单对象/数

1. 注意事项：

◦ PureComponent 的浅比较存在「局限性」：若 props 或 state 是复杂嵌套对象/数组，

即使内部属性发生变化，由于引用地址未变，浅比较会认为无变化，导致组件无法触发重新渲染（此时需通过创建新对象/数组的方式更新状态，如使用 Object.assign、扩展运算符

...）。

• 不要在 PureComponent 中使用不可变数据以外的状态更新方式，否则会导致组件渲染异常。

1. 对应函数组件方案：

• React.Component 对应普通函数组件（无性能优化，父组件重新渲染则自身重新渲染）。

◦ React.PureComponent 对应函数组件中的 React.memo（ React.memo 是高阶组件，对

函数组件的 props 进行浅比较，实现与 PureComponent 类似的性能优化效果，若需对比 state，可结合 useMemo / useCallback）。

六、React 的高阶组件（HOC）：定义、与普通组件的区别及使用场景

1. 什么是高阶组件（HOC）

高阶组件（Higher-Order Component，简称 HOC）是 React 中用于复用组件逻辑的高级技巧，本质是一个函数，而非组件本身。该函数接收一个或多个组件作为参数，经过逻辑处理后返回一个新的增

强型组件。

核心公式： HOC(WrapperComponent) = EnhancedComponent，即通过高阶函数包装原始组件，生成具备额外能力的新组件，不修改原始组件的代码，符合「开闭原则」。

常见示例（如 React-Redux 的 connect 方法）： const EnhancedComponent = connect(mapStateToProps, mapDispatchToProps)(OriginalComponent)

2. HOC 与普通组件的区别

使用方式通过函数调用包装原始组件，直接在 JSX 中渲染（如生成新组件后使用<OriginalComponent />）

3. HOC 的常见使用场景

• 状态复用：提取多个组件共有的状态逻辑，封装到 HOC 中，让多个组件无需重复编写即可拥有该

状态。例如：用户登录状态管理（判断用户是否登录，未登录则跳转登录页）、表单数据管理（输入值绑定、表单验证逻辑）。

• 属性增强：为多个组件统一注入固定的 Props 或动态计算的 Props。例如：为列表组件注入分页数

据、为组件注入全局配置信息。

• 权限控制：封装权限校验逻辑，根据用户权限决定是否渲染原始组件，或渲染降级组件。例如：管

理员权限组件（仅管理员可查看）、游客权限组件（隐藏敏感操作按钮）。

• 日志埋点/性能监控：在组件的生命周期（或 Hooks）中添加日志记录、性能统计逻辑，无需侵入

组件内部代码。例如：记录组件的挂载/卸载时间、统计组件渲染耗时。

• 组件包装/样式统一：为多个组件统一添加外层容器、样式或动画效果。例如：为所有页面组件添加

统一的头部导航、为卡片组件添加统一的边框和阴影样式。

七、React 组件重新渲染的触发条件及 render 函数内部逻辑

1. 触发组件重新渲染的方法/操作

组件重新渲染的核心触发条件是「组件的状态或Props发生变化」，具体场景分为以下几类：

• 自身状态变化：

• 类组件：调用 setState 方法（无论传入的新状态与旧状态是否相同，默认都会触发重新渲染，

除非重写 shouldComponentUpdate 阻止）。

• 函数组件：调用 useState 或 useReducer 返回的更新函数（传入新状态时触发渲染，若新

状态与旧状态完全相同，React 会跳过渲染优化）。

父组件传递的 Props 变化：

• 父组件重新渲染时，若传递给子组件的 Props 发生变化（浅比较差异），子组件会触发重新渲染。

• 即使 Props 未变化，若父组件重新渲染，子组件默认也会跟随重新渲染（除非通过

PureComponent 或 React.memo 优化）。

父组件强制触发子组件渲染：父组件通过 forceUpdate 方法强制自身重新渲染，此时所有子组件