如何在对象内部声明hooks？React useRef写法简写相关疑问

结论 #

你提到的第二种对象内直接声明的写法是完全支持的合法简写方式，和你原来分开声明的写法效果完全等价。

原理说明 #

React Hooks的核心调用规则只要求以下两点，和你把Hook返回值赋值给什么变量/结构没有关联：

• 仅在React函数组件或自定义Hook顶层调用Hooks
• 每次组件渲染时，Hooks的调用顺序、调用数量完全保持一致

你给出的两种写法里，useRef()的调用顺序、数量都是固定的，都符合Hooks规则，运行效果没有任何区别。

// 原写法
const Ref1 = useRef();
const Ref2 = useRef();
const AllRefs = { Ref1, Ref2 };

// 简写写法 完全等价可用
const AllRefs = { Ref1: useRef(), Ref2: useRef() };

注意事项 #

只有当你尝试动态生成对象键值对、动态调用useRef的时候才会违反Hook规则，比如下面这种写法是不允许的：

// ❌ 错误示例：动态调用useRef，调用数量随props.list变化，不符合Hook规则
const AllRefs = {}
props.list.forEach((item, index) => {
  AllRefs[`ref${index}`] = useRef()
})

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