React.memo 实现原理解析

function memo(type, compare) {
  // 创建一个特殊的元素类型
  const elementType = {
    $$typeof: REACT_MEMO_TYPE, // 特殊标识符，表示这是一个 memo 组件
    type, // 被包裹的原始组件
    compare: compare === undefined ? null : compare, // 自定义比较函数
  };
  
  return elementType;
}

// 简化版的协调逻辑
function updateMemoComponent(
  currentFiber, // 当前 Fiber 节点
  workInProgressFiber, // 工作中的 Fiber 节点
  Component, // 被 memo 包裹的组件
  nextProps, // 新的 props
  renderLanes // 渲染优先级
) {
  // 获取之前的 props
  const current = currentFiber.memoizedProps;
  
  // 决定使用哪种比较函数
  let compare = Component.compare;
  if (compare === null) {
    // 默认使用浅比较
    compare = shallowCompare;
  }
  
  // 检查 props 是否相等
  if (compare(current, nextProps)) {
    // Props 没有变化，完全跳过渲染
    // 复用之前的子节点
    return bailoutOnAlreadyFinishedWork(
      currentFiber,
      workInProgressFiber,
      renderLanes
    );
  }
  
  // Props 发生了变化，继续正常渲染流程
  return updateFunctionComponent(
    currentFiber,
    workInProgressFiber,
    Component,
    nextProps,
    renderLanes
  );
}

function shallowCompare(prevProps, nextProps) {
  // 如果 props 对象引用相同，直接返回 true
  if (prevProps === nextProps) {
    return true;
  }
  
  // 检查 props 键的数量
  const prevKeys = Object.keys(prevProps);
  const nextKeys = Object.keys(nextProps);
  
  if (prevKeys.length !== nextKeys.length) {
    return false;
  }
  
  // 逐个比较每个属性值
  for (let i = 0; i < prevKeys.length; i++) {
    const key = prevKeys[i];
    
    // 使用 Object.is 进行严格比较（类似于 ===，但处理了 NaN 和 +0/-0 的情况）
    if (!Object.is(prevProps[key], nextProps[key])) {
      return false;
    }
  }
  
  return true;
}

// 简化的渲染流程
function beginWork(currentFiber, workInProgressFiber, renderLanes) {
  // 检查是否是 memo 组件
  if (workInProgressFiber.type && workInProgressFiber.type.$$typeof === REACT_MEMO_TYPE) {
    return updateMemoComponent(
      currentFiber,
      workInProgressFiber,
      workInProgressFiber.type.type, // 提取原始组件
      workInProgressFiber.pendingProps,
      renderLanes
    );
  }
  
  // 处理其他类型的组件...
}

// 深度比较实现（不推荐在生产环境使用，仅作示例）
function deepCompare(prevProps, nextProps) {
  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
}

// 选择性比较
function selectiveCompare(prevProps, nextProps) {
  // 只比较我们关心的属性
  return prevProps.importantValue === nextProps.importantValue;
}

const ExpensiveComponent = React.memo(
  function ExpensiveComponent(props) {
    // 组件实现
  },
  selectiveCompare // 使用自定义比较函数
);

function MyComponent(props) {
  // 即使使用 React.memo，内部状态变化仍会导致重新渲染
  const [state, setState] = useState(0);
  
  // 使用 useMemo 和 useCallback 可以进一步优化
  const computedValue = useMemo(() => {
    return expensiveCalculation(props.someValue);
  }, [props.someValue]);
  
  const handleClick = useCallback(() => {
    // 处理点击
  }, []);
  
  return <div>{/* ... */}</div>;
}

export default React.memo(MyComponent);