如何减少React组件中的Hook数量？解决状态集中与Props冗余问题

你的场景是顶层组件持有大量共享状态和处理器，需要传递给两层子组件，虽然层级不深，但props数量过多导致代码冗余，以下是几个实用的优化方案：

1. Context API 依然是高效选择 #

别因为层级浅就否定Context——当每个子组件需要传递10-12个props时，Context能直接消除重复的props传递，让代码更简洁。建议按职责拆分Context，避免创建一个臃肿的全局Context：

比如拆分出多个小Context：

// 单独创建Context文件
const XContext = createContext();
const YContext = createContext();

// 顶层组件中提供Context
const MyBigComp = () => {
  const [a, setA] = useState(false);
  const [b, setB] = useState([]);
  
  const toggleX = () => setA(prev => !prev);
  const addY = () => setB(prev => [...prev, { z: 1 }]);

  // 其他状态和处理器...

  return (
    <XContext.Provider value={{ a, toggleX }}>
      <YContext.Provider value={{ b, addY }}>
        <Comp1 />
        <Comp2 />
        <Comp3 />
        <Comp4 />
      </YContext.Provider>
    </XContext.Provider>
  );
}

// 子组件中获取Context
const Comp1 = () => {
  const { a, toggleX } = useContext(XContext);
  return <div onClick={toggleX}>{a.toString()}</div>;
}

这样每个子组件只需要获取自己需要的Context，避免了大量props的手动传递，维护成本也更低。

2. Props 聚合简化传递 #

如果暂时不想引入Context，可以将相关的状态和处理器打包成对象，通过扩展运算符传递，减少JSX中的重复代码：

const MyBigComp = () => {
  // 状态和处理器定义...

  // 按组件聚合props
  const comp1Props = { a, toggleX, c, someHandler };
  const comp2Props = { b, addY, d, anotherHandler };

  return (
    <>
      <Comp1 {...comp1Props} />
      <Comp2 {...comp2Props} />
      <Comp3 c={c} toggleX={toggleX} />
      <Comp4 d={d} e={e} addY={addY} />
    </>
  );
}

子组件内部直接解构props即可，这样顶层组件的JSX会更整洁，也方便统一管理每个组件的props集合。

3. 自定义Hook封装状态逻辑 #

把顶层组件中复杂的状态和处理器逻辑抽离到自定义Hook中，让顶层组件只负责状态的消费和传递，代码结构更清晰：

// 自定义Hook
const useBigCompState = () => {
  const [a, setA] = useState(false);
  const [b, setB] = useState([]);
  // 其他20个状态...

  const toggleX = () => setA(prev => !prev);
  const addY = () => setB(prev => [...prev, { z: 1 }]);
  // 其他处理器...

  return {
    a, toggleX,
    b, addY,
    // 导出其他状态和方法
  };
}

// 顶层组件使用
const MyBigComp = () => {
  const { a, toggleX, b, addY, c, d, e } = useBigCompState();

  return (
    <>
      <Comp1 a={a} toggleX={toggleX} />
      <Comp2 b={b} addY={addY} />
      <Comp3 c={c} toggleX={toggleX} />
      <Comp4 d={d} e={e} addY={addY} />
    </>
  );
}

这种方式不会减少props传递，但能让顶层组件的代码更简洁，状态逻辑的复用和维护也更方便。

4. 局部状态下放（按需尝试） #

虽然你提到所有状态都需要共享，但可以再仔细排查：有没有某些状态仅在某个子组件树内使用，只是处理器需要同步到顶层？比如某个状态只有Comp1和它的子组件依赖，处理器只是修改该状态并通知顶层，那可以把这个状态下放到Comp1，通过回调把变化传递给顶层，减少顶层持有的状态数量：

// 子组件Comp1
const Comp1 = ({ onToggleX }) => {
  const [a, setA] = useState(false);
  
  const handleToggle = () => {
    setA(prev => !prev);
    onToggleX(!a); // 通知顶层
  };

  return <div onClick={handleToggle}>{a.toString()}</div>;
}

// 顶层组件
const MyBigComp = () => {
  const [a, setA] = useState(false);
  
  const toggleX = (newVal) => {
    setA(newVal);
    // 其他需要同步的逻辑
  };

  return <Comp1 onToggleX={toggleX} />;
}

如果能找到这类状态，下放后能有效减轻顶层组件的负担。

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