react hook 里实现类似 vue $set() 的最佳方法？

Question

这个需求有点像是 vue3 里面的 useData hook

这样一个组件：

const [arr, setArr] = useState([1, 2, 3])
return arr.map((value, key) => (
    <Input
      key={key}
      value={value}
      onChange={newVal => {
        setArr(arr.map((rawVal, idx) => (idx === key ? newVal : rawVal)))
      }}
    />
))

hook 了一个非简单类型的数据，在这里是 arr，初始值是 [1, 2, 3]
本组件接收子组件的 onChange 事件，生成一个新的 arr 再交由子组件渲染
子组件就是简单的接收一个 value，修改的时候把新的值返回给父组件

上面的例子里，每次修改都会生成一个新的数组，这里开销能不能减小呢？

useReduce 不能准确修改某个值，貌似这里也不适用。

Answer 1

最后还是选择了 immer 这个 immutable 库，
确实和 @michael_cai 说的一样，新生成数组的开销并不大。

使用 immer 写起来和命令式编程差不多：

onChange={newVal =>
    immer(arr, draft => {
        draft[idx] = newVal
    })
}

Answer 2

“准确修改某个值” 这种操作不符合 Immutable。就我看来，Hook 整体的实现都非常依赖于 Immutable，所以你需求应该是无法实现的。

再者“生成一个新的数组”的开销并不会大多少。