第 7 卷

• 适用阶段：更新阶段（自动触发 shouldComponentUpdate 校验）。

• 优化原理： PureComponent 自动实现了 shouldComponentUpdate 方法，内部对

nextProps 与 this.props、 nextState 与 this.state 进行「浅比较」：

• 基本类型（数字、字符串、布尔值）：直接比较值是否相同。
• 引用类型（对象、数组）：比较引用地址是否相同（不深入对比内部属性）。

• 若浅比较无变化， shouldComponentUpdate 返回 false，阻止组件重新渲染；若有变化则

返回 true，触发渲染。

• 适用场景：组件的 Props/State 为基本类型或简单引用类型（无嵌套结构），且渲染仅依赖

Props/State。

• 优化方法 2：手动重写 shouldComponentUpdate：

• 适用阶段：更新阶段。

• 优化原理：开发者根据组件的实际渲染依赖，自定义对比逻辑，仅在关键属性变化时返回

true，其他情况返回 false。例如，组件仅依赖 props.id，则仅对比 nextProps.id 与 this.props.id，忽略其他 Props 变化。

• 优势：适用于复杂场景（如嵌套对象的 Props），可通过「深比较关键属性」实现精准优化（注

意：避免全量深比较，否则会抵消优化效果）。

2. 辅助优化阶段：挂载阶段与卸载阶段

• 挂载阶段优化：componentDidMount 中请求数据：

• 优化原理：避免在 render 或 constructor 中请求数据（会导致多次请求或阻塞渲染），

在 componentDidMount 中请求数据，此时组件已挂载完成，请求到数据后调用 setState 触发一次更新，仅渲染一次数据加载后的 UI，减少冗余渲染。

• 卸载阶段优化：componentWillUnmount 中清理资源：

• 优化原理：若组件卸载前未清理资源（如定时器、原生事件监听、未完成的网络请求），这些资源

会持续占用内存，导致内存泄漏，间接影响应用性能。在 componentWillUnmount 中清理这些资源，释放内存，保证应用运行流畅。

3. 其他生命周期相关优化：避免在 render 中创建新对象

适用阶段：更新阶段（ render 方法执行时）。

• 优化原理： render 方法每次执行都会重新创建新对象/新函数（如 onClick={() =>

this.handleClick()}、 props.data = { name: 'xxx' }），导致 PureComponent 或 shouldComponentUpdate 的浅比较认为 Props/State 变化，触发不

必要的渲染。

• 解决方案：将对象/函数提升到组件实例属性（如 this.handleClick =

十四、React 的严格模式（Strict Mode）及作用

1. 什么是 React 严格模式

React 严格模式是一种「开发环境下的辅助工具」，通过 <React.StrictMode> 组件包裹子组件启用，仅在开发环境生效（生产环境自动禁用，无性能开销）。它不是一种语法或功能，而是用于检

测组件中的潜在问题，帮助开发者编写更规范、更可靠的 React 代码。

使用方式（包裹需要检测的组件树）：

Code block

1import React from 'react';

2import ReactDOM from 'react-dom/client';

3

2. 严格模式的核心作用

• 检测不安全的生命周期方法：

• React16.3 后废弃了部分生命周期方法（如 componentWillMount、

componentWillReceiveProps、 componentWillUpdate），这些方法存在潜在风险（如重复渲染、状态不可预测）。

• 严格模式下，若组件使用了这些废弃方法，会在控制台输出警告，并提示替代方法（如用

getDerivedStateFromProps 替代 componentWillReceiveProps）。

• 检测意外的副作用：

• React 期望 render 方法是纯函数（无副作用，如修改状态、操作 DOM、请求数据），但开发者

可能会在 render 或其他生命周期方法中添加意外副作用。

• 严格模式下，会在开发环境中「双重调用」以下方法，以检测副作用： render 方法、

getDerivedStateFromProps 静态方法、 setState 的更新函数、

• 双重调用的目的：若方法存在副作用（如修改全局变量），则会被重复执行，从而在开发环境中暴

• 检测过时的 API 使用：

• 严格模式会检测组件中是否使用了 React 过时的 API（如 ReactDOM.findDOMNode、旧版上

下文 API childContextTypes、 UNSAFE_ 前缀的生命周期方法）。

• 若使用了这些 API，会在控制台输出警告，提示使用最新的替代方案（如用 ref 替代

findDOMNode，用新版 createContext 替代旧版上下文 API）。

• 检测非严格模式下的并发渲染问题：

• React18 默认启用并发渲染，部分非严格模式下正常的代码（如依赖同步渲染顺序的逻辑）在并发

渲染下可能出现问题。

• 严格模式会模拟并发渲染的环境，检测这些潜在问题（如状态更新顺序错误、依赖渲染时机的副作

用），帮助开发者提前适配并发渲染。

• 检测不安全的 ref 使用：

• 严格模式会检测是否使用了过时的 ref 用法（如字符串 ref，如 <div ref="myDiv"

/>），并提示使用回调 ref 或 useRef（如 <div ref={this.myDivRef} />）。

3. 关键注意事项

• 严格模式仅作用于开发环境，生产环境不会执行任何检测逻辑，也不会影响应用性能。
• 严格模式不直接修复问题，仅通过警告提示开发者问题所在，需要开发者手动修改代码解决。

• 严格模式会包裹子组件树，所有子组件（包括嵌套组件）都会被检测，若需排除部分组件，可将其

移出 <React.StrictMode> 包裹范围。

十五、React 中组件间通信的方式及适用场景

React 组件间通信根据「组件关系」（父子、兄弟、跨层级）的不同，有多种实现方式，核心思路是「数据传递」或「状态共享」，具体方式及适用场景如下：

1. 父子组件通信（最常见场景）

• 方式 1：父传子：Props 传递：

• 实现逻辑：父组件通过在子组件标签上添加属性（Props）传递数据/方法，子组件通过

this.props（类组件）或参数（函数组件）接收。

• 适用场景：父组件向子组件传递静态数据、动态状态，或传递回调函数（让子组件触发父组件状态

更新）。

• 示例：

• 方式 2：子传父：回调函数（Props 传递函数）：