©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>react useState hook 数组对象更新机制
为了更好地理解这个hook，理解这个数组对象的更新机制，我写了一个很简单的增删改的小案例。
react组件的更新机制只对数组进行的一个浅对比，也就是说没有改变它的引用地址，所以我们要改变数组时应该进行一次拷贝。
当数组和对象只有一级时，展开运算符和一些库函数复制方法都是深拷贝
const arrCopy = arr.slice(); const objCopy = Object.assign({},obj)
数组中使用：
import React, { useEffect, useState } from 'react'; const App = () => { const [
arr, setArr] = useState([1, 2, 3]); const [value, setValue] = useState(); const
change = () => { // setArr((pre) => { // if (pre.length == 0) return []; //
pre[0] = 100; // let newArr = pre.slice(); // return newArr; // }) arr[0] = 100;
let newArr = arr.slice(); setArr(newArr); } const deleteItem = (index) => {
setArr((pre) => { pre.splice(index, 1); let newArr = pre.slice(); return newArr;
}) console.log(arr); } const addItem = (num) => { let inputDom = document.
getElementById('inputId'); setArr((pre) => { pre.push(inputDom.value); let
newArr= pre.slice(); return newArr; }) console.log(arr); } let arr1 = [1, 2, 3,
4]; let arr2 = arr1.slice(); arr2.splice(0, 1); console.log(arr1, arr2);//
可以发现修改拷贝之后的arr2并不影响arr1 return ( <div> <button onClick={change}>change</button>
<input value={value} id='inputId'></input> <button onClick={() => addItem(value)
}>add</button> <div> { arr.map((item, index) => { return ( <div>{item}{index} <
button onClick={() => deleteItem(index)}>delete</button></div> ) }) } </div> </
div> ) }; export default App;
对象中使用：
const [obj,setObj]=useState({ name:'xiaowang' age:'10'; }); // 更新值 let newObj =
{...obj,age='18'} setObj(newObj);