关于React Fiber的pendingProps、memoizedProps与React.memo()的疑问

这两者不是一回事，属于React不同层级的优化机制，核心差异如下：

1. 所处层级与作用范围不同 #

• Fiber的pendingProps/memoizedProps对比是React内核的基础更新检查逻辑，所有组件（类组件、函数组件）都会触发这个检查。它是React判断是否需要对当前Fiber节点对应的组件进行后续更新流程的前置条件——如果props没变化，React会跳过该节点的DOM更新，但对于无React.memo包裹的函数组件，依然会重新执行组件函数生成新的虚拟DOM，只是最后diff时发现和旧的一致，不会改动真实DOM。
• React.memo()是针对函数组件的上层优化，它是一个高阶组件，作用是当props未变化时，直接跳过组件函数的重新执行，复用之前渲染好的虚拟DOM。这相当于在Fiber的基础检查之上，多了一层“跳过组件执行”的优化，能节省组件内部的计算、Hook执行等开销。

2. 优化粒度不同 #

• Fiber的props对比是React底层自动执行的，它的优化停留在“是否要更新DOM”这个阶段，管不了组件函数本身的执行。
• React.memo()的优化粒度更细，直接避免了组件函数的重复执行——这在组件内部有大量计算逻辑时，能带来更明显的性能提升。

3. 对比逻辑的灵活性不同 #

• Fiber内部的props对比用的是Object.is（浅对比）逻辑，这个是React内置的，开发者无法修改。
• React.memo()支持传入第二个参数，自定义props的对比函数（比如深对比、只对比特定字段），可以根据业务场景灵活调整判断逻辑。

举个直观的例子：

// 无React.memo的函数组件
function NormalComponent(props) {
  console.log("NormalComponent执行了");
  return <div>{props.text}</div>;
}

// 有React.memo的函数组件
const MemoizedComponent = React.memo(function(props) {
  console.log("MemoizedComponent执行了");
  return <div>{props.text}</div>;
});

当父组件重新渲染但传入的text props未变化时：

• NormalComponent会打印日志（组件函数执行了），但最终不会更新DOM；
• MemoizedComponent不会打印日志（组件函数没执行），直接复用之前的虚拟DOM。

内容的提问来源于stack exchange，提问作者Rcinos