# React 中断渲染瀑布：memo、useCallback、useMemo 

> **React 世界里，最大的性能问题，往往不是你算得太慢，而是你想得太多。**

如果你写 React 写到某一天，发现：

* 点了一下按钮，整个页面都在 `console.log('render')`
* 网络面板里请求像下雨一样
* 明明数据没变，接口却一遍一遍打

恭喜你，你遇到的不是 bug，
而是 **React 的“渲染瀑布”**。

这篇文章不谈晦涩的源码，也不堆概念，我们用 **通俗诙谐** 一点的方式，讲清楚：

> **React.memo、useCallback、useMemo 是如何联手阻断渲染级联 + 依赖变化导致的重复计算 / 请求问题的。**

---

## 一、先澄清一个“江湖误会”：你以为的数据瀑布

很多人口中的“数据瀑布”其实长这样：

```txt
父组件 render
  ↓
子组件 render
  ↓
useEffect 执行
  ↓
发请求 / 重计算
  ↓
setState
  ↓
父组件再 render
```

它不像真正的网络瀑布那样是「请求 A 完成才能请求 B」，
而更像：

> **“一件小事，被层层转述，最后全村都知道了。”**

这类问题的根源通常只有一句话：

> **React 重新渲染，靠的是“引用是否变化”，不是“内容是否变化”。**

而 memo / callback / memo，
就是 React 给你的三根“止水闸”。

---

## 二、React.memo：不关你的事，就别跟着激动

### 🌰 在现实世界中

你在公司加班改 PPT，
隔壁同事突然站起来大喊一声：

> “我改了个变量！”

结果全公司的人都站起来鼓掌。

显然很离谱。

但在 React 里，**默认就是这么干的。**

---

### ❌ 默认行为

```jsx
function Parent() {
  const [count, setCount] = useState(0)
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      <Child />
    </>
  )
}
```

👉 `count` 变了
👉 `Child` 也跟着重新 render
👉 哪怕它啥也没用

---

### ✅ React.memo 出场

```jsx
const Child = React.memo(() => {
  return <div>我很冷静</div>
})
```

> **“如果和我无关，请不要打扰我。”**

React.memo 会说：

* props 没变
* 那我不动

---

### 🌊 对瀑布的影响

少一次子组件 render =

* 少一次 useEffect
* 少一次请求
* 少一次无意义计算

**瀑布从源头被掐断。**

---

## 三、useCallback：不要每天换一个性格

### 🌰 在现实世界中

你跟同事说：

> “有事找我。”

但你每天用不同的声音、不同的名字、不同的手机号说这句话。

于是同事每天都以为：

> “这是一个新的人。”

在 React 里，函数就是这样。

---

### ❌ 问题代码

```jsx
<Child onClick={() => console.log('click')} />
```

每一次 render：

* 都是一个**新函数**
* 引用必然变化

即使 Child 被 memo 包了，也没用。

---

### ✅ useCallback

```jsx
const onClick = useCallback(() => {
  console.log('click')
}, [])

<Child onClick={onClick} />
```

> **“我还是我，不因外界动荡而改变。”**

函数稳定了：

* props 稳定
* 子组件不 render
* effect 不乱跑

---

### 🌊 对瀑布的影响

不稳定函数 → 子组件 render → effect 触发 → 请求

useCallback 做的事：

> **“别因为我换了件衣服，就当我是另一个人。”**

---

## 四、useMemo：别把同一件事天天重新算一遍

### 🌰 在现实世界中

你每天早上出门都要算一遍：

> 1 + 1 等于几

不是你不会算，
是你**不该算**。

---

### ❌ 常见问题

```jsx
const options = { pageSize: 10 }
<Child options={options} />
```

看起来一样，
实际上：

```js
{} !== {}
```

React：

> “这是新东西。”

---

### ✅ useMemo

```jsx
const options = useMemo(() => ({ pageSize: 10 }), [])
```

**哲学含义：**

> **“没变，就别再想了。”**

useMemo 保证：

* 值不变
* 引用不变
* 世界安静

---

### 🌊 对瀑布的影响

对象 / 数组不稳定 → memo 失效 → 子组件 render → effect

useMemo 的作用是：

> **“把昨天想清楚的事，留到今天直接用。”**

---

## 五、三者合体：真正的“断流术”

```jsx
const Child = React.memo(({ onClick, options }) => {
  useEffect(() => {
    fetchData(options)
  }, [options])

  return <button onClick={onClick}>Click</button>
})

function Parent() {
  const onClick = useCallback(() => {}, [])
  const options = useMemo(() => ({ pageSize: 10 }), [])

  return <Child onClick={onClick} options={options} />
}
```

**此时：**

* Parent 更新 ≠ 世界崩塌
* Child 不再无辜陪跑
* 请求只在“真正变化”时发生

瀑布，被拦在了山顶。

---

## 六、最后的总结

> **React.memo 教我们：不关我的事，不必激动**
> **useCallback 教我们：保持自我，世界才稳定**
> **useMemo 教我们：想清楚一次，比想一百次更重要**

它们解决的不是“算得慢”，
而是：

> **“没必要的波动，不要引发连锁反应。”**

当你学会让 React 世界里的东西都
**该变的才变，不该变的坚决不动**，

你会发现：

* render 少了
* 请求干净了
* 性能问题，突然就不神秘了

——这，才是 memo / callback / memo 的真正意义。


React.memo、useCallback、useMemo 是如何联手阻断渲染级联 + 依赖变化导致的重复计算 / 请求问题的。

React 中断渲染瀑布：memo、useCallback、useMemo 到底在挡什么？

前端

客户端

React性能优化技巧：利用memo、useCallback和useMemo阻断渲染瀑布。memo防止无关组件重渲染，useCallback稳定函数引用，useMemo缓存计算结果，三者配合可显著减少不必要的渲染和请求，提升应用性能。掌握这些技巧能让React应用更高效稳定。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

React 中断渲染瀑布：memo、useCallback、useMemo 到底在挡什么？-腾讯云开发者社区-腾讯云

React 中断渲染瀑布：memo、useCallback、useMemo 到底在挡什么？

React 中断渲染瀑布：memo、useCallback、useMemo 到底在挡什么？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐