React hooks useState 问题

Question

例如我有一个 useState

let [data,setData]=useState({a:1,b:2});

let setDataFun=(key,value)=>{
    setData(data[key]=value);  // 我这种写法可能不对，但又不知道怎么写
}

例如我 更新了data键为a的值 会导致b关联的dom重新渲染，如何避免这种问题呢？应该怎么写才对？初学React者，请懂的人帮忙指点一下，谢谢。

Answer 1

如果你不希望两者同时刷新，应该

const [dataA, setDataA] = useState(1);
const [dataB, setDataB] = useState(2);

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

setData({...data,[key]:value})
React更新方式，不可变模式

Answer 3

https://overreacted.io/zh-han...
这篇文章可以给你启发，如果你真的很在乎性能，那就把不相关的依赖拆分出去

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

首先，setData 应该传递一个具有{a: number,b: number}的值，一个全新的对象替代旧值，而不是 data[key]=value
最后，想修改 a 的值，不想 b 关联的 dom 重新渲染，请拆分为两个 state。

Answer 5

let setDataFun = (key, value) => {
    setData(prevData => ({ ...prevData, [key]: value }));
}