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

这个需求有点像是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不能准确修改某个值,貌似这里也不适用。
aluckdog
浏览 874回答 2
2回答

米脂

最后还是选择了immer这个immutable库,确实和@michael_cai说的一样,新生成数组的开销并不大。使用immer写起来和命令式编程差不多:onChange={newVal=>immer(arr,draft=>{draft[idx]=newVal})}

杨魅力

“准确修改某个值”这种操作不符合Immutable。就我看来,Hook整体的实现都非常依赖于Immutable,所以你需求应该是无法实现的。再者“生成一个新的数组”的开销并不会大多少。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript