「React实战面试题」：React.memo为什么失效了？

前端达人

发布于 2025-10-09 13:24:37

11000

代码可运行

文章被收录于专栏：前端达人前端达人

运行总次数：0

代码可运行

上期答案揭晓

上期「React实战面试题」：状态批量更新的经典陷阱关于连续三次setCount(count + 1)的问题，正确答案是选项C：1

为什么？因为React的状态批量更新机制：

const handleClick = () => {
  // 在这个函数作用域内，count始终是0（假设初始值为0）
  setCount(0 + 1);  // 将状态设置为1
  setCount(0 + 1);  // 还是设置为1
  setCount(0 + 1);  // 依然是设置为1
};

正确的写法应该是：

const handleClick = () => {
  setCount(prev => prev + 1);  // 1
  setCount(prev => prev + 1);  // 2
  setCount(prev => prev + 1);  // 3
};

现在让我们进入今天更有挑战性的问题！

今日场景：性能优化的困惑

你正在开发一个数据展示应用，产品经理反馈页面在交互时有明显的卡顿。经过性能分析，你发现某个子组件在父组件更新时会不必要地重新渲染。

作为一个有经验的React开发者，你立即想到了React.memo这个性能优化利器。

问题代码

你写下了以下代码：

// 使用React.memo包裹子组件，期望它只在props变化时才重新渲染
const Child = React.memo(({ data }) => {
console.log("Child组件重新渲染了");
return (
    <div className="child-content">
      <h3>{data.label}</h3>
      <p>{data.description}</p>
    </div>
  );
});

function App() {
const [count, setCount] = useState(0);

// 定义传递给子组件的数据
const data = { label: "用户信息" };

return (
    <div className="app">
      <button onClick={() => setCount(count + 1)}>
        点击次数: {count}
      </button>
      <Child data={data} />
    </div>
  );
}

🚨 预期与现实的差距

你的预期：

点击按钮时，count状态更新
Child组件的props没有变化
React.memo应该阻止子组件重新渲染
控制台不应该输出"Child组件重新渲染了"

实际情况：

每次点击按钮
控制台都会输出"Child组件重新渲染了"
React.memo似乎完全没有起作用

🤔 问题诊断

打开浏览器开发者工具，你看到每次点击按钮后，控制台都会打印：

Child组件重新渲染了
Child组件重新渲染了
Child组件重新渲染了
...

这让你非常困惑：React.memo不是应该缓存组件吗？为什么它失效了？

💭 深入思考

在给出答案之前，让我们从几个角度分析这个问题：

思考点1：React.memo的工作原理

React.memo是如何决定是否需要重新渲染组件的？它比较props的方式是什么？

思考点2：JavaScript的数据类型

在JavaScript中，对象的比较是基于值还是基于引用？

思考点3：组件渲染与变量创建

每次组件重新渲染时，函数内部的变量会发生什么？

🔍 实验验证

让我们做一个简单的实验来理解问题：

// 实验1：对象比较
const obj1 = { label: "Hello" };
const obj2 = { label: "Hello" };
console.log(obj1 === obj2); // 这会输出什么？

// 实验2：模拟组件渲染
function simulateRender() {
const data = { label: "Hello" };
return data;
}

const render1 = simulateRender();
const render2 = simulateRender();
console.log(render1 === render2); // 这又会输出什么？

🎯 面试题：找出问题根源

基于以上分析，请选择你认为正确的答案：

选项A

React.memo不能处理对象类型的props，只能处理原始类型的props。

选项B

data对象在每次渲染时都被重新创建，导致引用地址改变，React.memo的浅比较认为props发生了变化。

选项C

count状态的更新会强制所有子组件重新渲染，无论是否使用了React.memo。

选项D

问题出在console.log语句，它在memoized组件内部，导致每次都会执行。

💡 相关场景思考

这个问题在实际开发中非常常见，类似的场景还有：

场景1：列表渲染优化

function TodoList() {
  const [todos, setTodos] = useState([]);
  
  return todos.map(todo => (
    <TodoItem 
      key={todo.id}
      todo={todo}
      onDelete={() => handleDelete(todo.id)} // 这里有陷阱吗？
    />
  ));
}

场景2：配置对象传递

function Dashboard() {
const [refresh, setRefresh] = useState(0);

const chartConfig = {
    width: 800,
    height: 400,
    theme: 'light'
  };

return<Chart config={chartConfig} />;
}

场景3：样式对象

function Card({ title }) {
  const style = {
    padding: '20px',
    borderRadius: '8px'
  };
  
  return <div style={style}>{title}</div>;
}

🔧 解决方案预告

如果你已经找到了问题的根源，那么下一个问题自然就是：如何正确地优化这个组件？

可以思考以下几种方案：

使用useMemo
将对象定义移到组件外部
使用自定义比较函数
重新设计组件的props结构

💬 互动讨论

请在评论区分享：

你的答案：A、B、C、D 中的哪一个？
你的推理：为什么选择这个答案？基于什么原理？
解决方案：如果你来优化这段代码，你会怎么做？
实战经验：你在项目中遇到过React.memo失效的情况吗？

🧪 动手实验

想要验证你的理解？试试在本地运行这段代码：

import React, { useState, memo } from'react';

const Child = memo(({ data }) => {
console.log('Child渲染了, data引用:', data);
return<div>{data.label}</div>;
});

function App() {
const [count, setCount] = useState(0);

const data = { label: "Hello" };
console.log('App渲染了, data引用:', data);

return (
    <>
      <button onClick={() => setCount(count + 1)}>
        点击: {count}
      </button>
      <Child data={data} />
    </>
  );
}

观察控制台输出的对象引用，你会发现关键线索！