| React Hooks 之 useState 数组、对象更新机制 | 您所在的位置：网站首页 › usestate用法 › React Hooks 之 useState 数组、对象更新机制 |
|
在线demo：React useState Demo React组件的更新机制对state只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，那就不会重新渲染组件。对于数组、对象，需要使用深拷贝，即改变数组/对象的指针指向的地址，来实现组件的重新渲染。 深拷贝： const arrCopy = sourceArr.slice() //深拷贝简单数组 const objCopy = Object.assign({}, sourceObj) //深拷贝简单Object // 当对象中只有一级属性，没有二级属性的时候，Object.assign()方法为深拷贝， // 但是对象中有对象的时候，此方法在二级属性以后就是浅拷贝。 数组中使用useState const [arr, setArr] = React.useState([0, 1, 2]); return ( Use useState hook change Array Result arr[0]: {arr[0]} { setArr((prev) => { prev[0] = 1; const arrCopy = prev.slice(); return arrCopy; }); }} > set a[0] to 1 ) 对象中使用useState Use useState hook change Object Result obj.a1: {obj.a1} { setObj((prev) => ({ ...prev, a1: 1, })); }} > set a1 to 1您可以在在线demo React useState Demo 中测试和验证～ 参考文章：React Hook useState复杂数据更新机制踩坑 - 简书 (jianshu.com) |
| CopyRight 2018-2019 实验室设备网 版权所有 |