React.js中对象类型状态初始化：选空对象还是同结构对象？

问题背景 #

状态结构如下：

{
  id: '',
  value: {
    arr1: [],
    arr2: [],
  }
}

纠结两种初始化方式：

1. 用完整结构初始化，便于后续开发者理解状态结构，但会创建一个初始不会用到的对象

// initial state
const [someState, setSomeState] = useState({
  id: '',
  value: {
    arr1: [],
    arr2: [],
  }
})

// setting state after some data comes in
setSomeState({
  id: 'someId',
  value: {
    arr1: [...someData],
    arr2: [...someData],
  }
})

2. 用空对象初始化，避免创建无用对象，但可读性差

回答 #

优先选择完整结构初始化，除非你的应用处于极端性能敏感场景

• 可读性优先
  完整结构的初始值是最直观的状态文档，后续开发者不用查找setSomeState的调用处，就能立刻明白状态的层级、每个字段的类型和默认值预期。同时还能避免因访问未初始化字段导致的报错（比如空对象直接访问someState.value.arr1会抛出Cannot read properties of undefined，而完整初始化至少能拿到空数组）。

• 性能影响可忽略
  初始化时创建的这个小型对象，在现代JavaScript引擎中的内存占用和垃圾回收成本极低。只有当你的组件是高频渲染的列表项（比如一次渲染上千个），这种微小的开销才可能累积出可感知的影响——但绝大多数业务场景都不会遇到这种情况。

• 折中方案（可选）
  如果实在想兼顾，有两种方式：

  1. 用注释明确标注状态结构，同时初始化为空对象（注意要保证注释和代码同步更新）：

     // 状态结构：{ id: string, value: { arr1: Array, arr2: Array } }
     const [someState, setSomeState] = useState({})
     

  2. 使用TypeScript定义状态接口，通过类型提示明确结构，初始值设为null或空对象（注意访问时要做空值判断）：

     interface SomeState {
       id: string;
       value: {
         arr1: any[];
         arr2: any[];
       };
     }
     
     const [someState, setSomeState] = useState<SomeState | null>(null);
     

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