小白，请教各位大佬！react hook 里实现类似 vue $set() 的最佳方法？

Question

这个需求有点像是vue3里面的useDatahook
这样一个组件：
const[arr,setArr]=useState([1,2,3])
returnarr.map((value,key)=>(
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，所以你需求应该是无法实现的。再者“生成一个新的数组”的开销并不会大多少。