React中如何统计已渲染的（孙）子组件数量？

问题描述 #

我有一个父组件，会渲染多个子组件，每个子组件可能渲染一个或多个孙组件，也可能不渲染。我需要父组件统计已渲染的组件总数（含子组件和孙组件），用来实现美观的滑块。

初步尝试是在父组件中定义registerChildren回调函数：

const registerChildren = React.useCallback((count:number) => {
    setCardCount((prevCount) => prevCount + count);
},[])

将该函数作为props传递给子组件，每个子组件通过以下代码调用：

React.useEffect(() => props.registerChildren(count),[props, count]);

但尝试失败，触发了maximum update depth exceeded错误——尽管已经用React.useCallback包裹registerChildren。

若从useEffect依赖数组中移除props，无限重渲染问题可解决，但TypeScript会提示依赖项不完整，且计数会翻倍。由于实际代码涉及多组件，我不想逐个禁用exhaustive-deps检查。

问题根源 #

1. 无限重渲染循环：父组件调用setCardCount更新状态时会触发重渲染，导致子组件的props对象引用更新（即使registerChildren用了useCallback，父组件重渲染后子组件的props整体引用仍会变化）。子组件的useEffect依赖props，会再次调用registerChildren，形成循环。
2. 计数翻倍：组件挂载时调用一次registerChildren，父组件重渲染触发子组件props更新后，又会触发一次调用，导致重复累加计数。

解决方案 #

1. 精准控制useEffect依赖，避免props整体引用干扰 #

子组件中不要直接依赖整个props，而是解构出registerChildren单独作为依赖，同时在组件卸载时执行反向计数，避免内存泄漏和计数错误：

// 子组件内的useEffect
const { registerChildren } = props;
React.useEffect(() => {
  registerChildren(count);
  // 组件卸载时减去当前计数
  return () => registerChildren(-count);
}, [registerChildren, count]);

2. 用增减量替代直接累加，确保计数准确 #

父组件中修改registerChildren接收增减量（delta），而非直接传入当前数量，避免重复累加：

// 父组件
const [cardCount, setCardCount] = React.useState(0);

const registerChildren = React.useCallback((delta: number) => {
  setCardCount(prev => prev + delta);
}, []);

3. 处理动态变化的子组件计数 #

如果子组件的count值可能动态变化，需要先减去旧值、再加上新值，避免计数偏差：

// 子组件内的处理
const [prevCount, setPrevCount] = React.useState(count);

React.useEffect(() => {
  // 计算计数差值并更新
  registerChildren(count - prevCount);
  setPrevCount(count);
  // 卸载时清理当前计数
  return () => registerChildren(-count);
}, [registerChildren, count, prevCount]);

完整示例代码 #

父组件 #

import React from 'react';
import Child from './Child';

export default function Parent() {
  const [cardCount, setCardCount] = React.useState(0);

  const registerChildren = React.useCallback((delta: number) => {
    setCardCount(prev => prev + delta);
  }, []);

  return (
    <div>
      <p>已渲染组件总数：{cardCount}</p>
      <Child registerChildren={registerChildren} hasGrandchildren={true} />
      <Child registerChildren={registerChildren} hasGrandchildren={false} />
      <Child registerChildren={registerChildren} hasGrandchildren={true} />
    </div>
  );
}

子组件 #

import React from 'react';
import Grandchild from './Grandchild';

type ChildProps = {
  registerChildren: (delta: number) => void;
  hasGrandchildren: boolean;
};

export default function Child({ registerChildren, hasGrandchildren }: ChildProps) {
  // 计算当前组件的计数：自己+孙组件数量
  const count = hasGrandchildren ? 3 : 1;
  const [prevCount, setPrevCount] = React.useState(count);

  React.useEffect(() => {
    registerChildren(count - prevCount);
    setPrevCount(count);
    return () => registerChildren(-count);
  }, [registerChildren, count, prevCount]);

  return (
    <div className="child">
      <p>子组件</p>
      {hasGrandchildren && (
        <>
          <Grandchild />
          <Grandchild />
        </>
      )}
    </div>
  );
}

孙组件 #

import React from 'react';

export default function Grandchild() {
  return <p>孙组件</p>;
}

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