React函数组件中过多useState是否有类似Vue ref的简化写法？

React 没有提供和 Vue ref 完全一致的单变量响应式原生语法，但完全可以通过原生 Hook 的组合用法，避免重复编写多组结构相似的 useState 声明，常见方案如下：

• 方案1：使用对象类型的 useState 合并同类状态（零额外成本，最常用）
  把逻辑关联、类型一致的状态收敛到同一个对象中管理，只需要声明一次 useState 即可。
  对应示例中的多布尔值开关场景，代码可以改写为：

  // 一次性声明所有option状态
  const [options, setOptions] = useState({
    option1: false,
    option2: false,
    option3: false,
    option4: false,
    option5: false
  })
  

  注意 React 的 useState 更新对象时是全量替换而非自动合并，更新单个状态时需要保留原有其他字段：

  // 把option1设置为true
  setOptions(prev => ({
    ...prev,
    option1: true
  }))
  

  如果觉得每次写展开运算符麻烦，可以额外封装一个专用更新函数简化调用：

  const setOption = (key, value) => {
    setOptions(prev => ({...prev, [key]: value}))
  }
  // 调用示例：setOption('option2', true)
  

• 方案2：使用 useReducer 管理多状态，统一更新逻辑
  如果状态数量多、更新操作有共性（比如批量重置、批量切换开关），用 useReducer 会比对象型 useState 更易维护：

  // 定义统一的状态更新逻辑
  const optionReducer = (state, action) => {
    switch(action.type) {
      case 'SET':
        return {...state, [action.key]: action.value}
      case 'TOGGLE':
        return {...state, [action.key]: !state[action.key]}
      case 'RESET':
        return Object.fromEntries(Object.keys(state).map(key => [key, false]))
      default:
        return state
    }
  }
  
  // 初始化状态
  const [options, dispatch] = useReducer(optionReducer, {
    option1: false,
    option2: false,
    option3: false,
    option4: false,
    option5: false
  })
  
  // 调用示例：切换option3的开关状态
  dispatch({type: 'TOGGLE', key: 'option3'})
  

• 方案3：自定义Hook实现接近Vue ref的调用体验
  如果偏好单变量读写的使用方式，可以自己封装一个轻量自定义Hook，不需要引入第三方依赖：

  function useReactive(initialValue) {
    const [val, setVal] = useState(initialValue)
    return useMemo(() => ({
      get value() {
        return val
      },
      set value(newVal) {
        setVal(newVal)
      }
    }), [val])
  }
  
  // 使用方式和Vue ref几乎一致
  const option1 = useReactive(false)
  // 读值：option1.value
  // 改值：option1.value = true
  

注意：不建议把逻辑完全无关的状态强行合并到同一个对象中，只有同属一个业务模块、更新逻辑存在共性的状态（比如示例中的多组配置开关）合并才有收益，否则反而会提升维护成本，触发不必要的组件重渲染。

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