React自定义Hook：何时返回数组解构，何时返回对象解构？

在React自定义Hook里，返回数组还是对象解构，核心看返回值的复杂度、语义清晰度，以及未来的扩展性，两者适用场景差异很明显：

优先用数组解构的场景 #

• 返回值是固定的少量组合，语义默认清晰：比如像官方的useState、useReducer，返回的是「状态+更新函数」这种强关联对，大家默认知道顺序含义，这时用数组解构的好处是能自定义变量名，不用受Hook返回的键名限制。
  代码示例：

  function useUserBasic() {
    const [name, setName] = useState('');
    const [age, setAge] = useState(0);
    return [name, age, setName, setAge];
  }
  // 使用时可以自由命名，不用跟Hook里的变量名一致
  const [username, userAge, updateUsername, updateUserAge] = useUserBasic();
  

• 返回值是一组逻辑绑定的操作对：比如「数据+刷新函数」「弹窗状态+开关函数」这种固定搭配，用户调用时不需要刻意记住键名，按顺序解构就能用。

优先用对象解构的场景 #

• 返回值数量多、语义复杂，或未来可能加新字段：如果Hook返回的内容超过3个，或者后续可能新增返回值，用对象解构能彻底避免「顺序搞错」的问题，而且调用时只需要提取自己需要的字段，不用管返回的顺序。
  代码示例：

  function useUserProfile() {
    const [name, setName] = useState('');
    const [age, setAge] = useState(0);
    const [email, setEmail] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    
    // 模拟异步拉取用户信息
    useEffect(() => {
      setIsLoading(true);
      setTimeout(() => {
        setName('Alice');
        setAge(28);
        setEmail('alice@example.com');
        setIsLoading(false);
      }, 1000);
    }, []);
  
    return { name, age, email, isLoading, setName, setAge, setEmail };
  }
  // 使用时只取需要的字段，顺序随便换
  const { name, email, setName } = useUserProfile();
  

• 需要明确语义区分：当返回的各个值职责差异大时，对象的键名能直接表达含义，比如返回{ data, error, loading }比数组[data, error, loading]更直观，不用费心记顺序，别人看代码也能一眼看懂每个变量的作用。

简单总结 #

• 数组解构：适合轻量、固定组合、需要自定义变量名的场景，灵活性拉满，适配类似useState的成对操作。
• 对象解构：适合多返回值、语义复杂、可能扩展的场景，可读性和可维护性更高，避免踩顺序错误的坑。

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