React中如何不使用单个对象作为state时获取函数式组件所有状态？

React官方没有提供直接批量获取所有独立useState状态的API，不过可以通过以下两种常用方案实现，无需把所有状态合并到单个useState入参中：

方案1：自定义封装带状态收集能力的useState（推荐） #

该方案侵入性低，新增状态时无需额外维护，适合生产环境运行时使用：

import React from 'react';
// 用WeakMap存储组件和对应状态的映射，避免内存泄漏
const componentStateMap = new WeakMap();

function useTrackedState(initialValue, stateKey) {
  // 每个组件实例对应唯一的ref标识
  const compInstanceRef = React.useRef({});
  const [state, setState] = React.useState(initialValue);
  // 不传语义化key时用React内置方法生成唯一ID
  const finalKey = stateKey || React.useId();

  // 组件首次渲染时初始化状态容器
  if (!componentStateMap.has(compInstanceRef.current)) {
    componentStateMap.set(compInstanceRef.current, {});
  }
  // 实时更新状态映射
  componentStateMap.get(compInstanceRef.current)[finalKey] = state;

  // 封装获取所有状态的方法
  const getAllState = React.useCallback(() => {
    return {...componentStateMap.get(compInstanceRef.current)};
  }, []);

  return [state, setState, getAllState];
}

组件内使用示例：

function DemoComponent() {
  // 第二个参数可传入语义化的状态名，方便读取时识别
  const [showHomeButton, setShowHomeButton, getAllState] = useTrackedState(false, 'showHomeButton');
  const [key, setKey] = useTrackedState('val', 'key');
  const [key2, setKey2] = useTrackedState('val2', 'key2');

  const handleLogState = () => {
    // 调用方法直接拿到所有状态，返回格式：{showHomeButton: false, key: 'val', key2: 'val2'}
    console.log(getAllState());
  }

  return <button onClick={handleLogState}>输出所有状态</button>
}

方案2：手动维护状态快照（适合小体量组件） #

如果不想修改原有useState的声明，也可以用useRef手动同步所有状态：

import React, { useState, useRef, useEffect } from 'react';

function DemoComponent() {
  const [showHomeButton, setShowHomeButton] = useState(false);
  const [key, setKey] = useState('val');
  const [key2, setKey2] = useState('val2');

  // 用ref存储最新的状态快照
  const allStateRef = useRef({});
  // 任意状态更新时同步到ref
  useEffect(() => {
    allStateRef.current = {
      showHomeButton,
      key,
      key2
    }
  }, [showHomeButton, key, key2])

  const handleLogState = () => {
    console.log(allStateRef.current);
  }

  return <button onClick={handleLogState}>输出所有状态</button>
}

该方案的优势是无需调整原有状态声明逻辑，缺点是新增状态时需要手动同步到依赖数组和ref对象中，容易出现遗漏。

注意事项 #

• 以上方案仅适用于自有组件的状态获取，无法读取第三方组件的内部状态，符合React的封装设计原则
• 若无批量埋点、状态导出等特殊需求，不推荐过度使用这类方案，React原生的状态拆分设计更利于代码维护，关联度高的状态优先考虑用useReducer或合并到同一个useState对象中管理。

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