问题描述
我自定义了一个hook,hook接收一个数组作为state的初始值,这个hook有个removeIndex方法,作用是传入数组的下标index,然后从数组中删除这个值
代码:
export const useArray = (persons: Person[]) => {
const [value, setValue] = useState(persons);
const removeIndex = (index: number) => {
let arr = value;
arr.splice(index, 1);
setValue(arr);
};
return {
value,
removeIndex,
};
};
在这个removeIndex方法中,我直接使用赋值的方式将value赋值给arr,众所周知,这是一个浅拷贝操作,然后就对arr进行操作,删除了下标为index 的值
导致结果:
在使用这个方法时,state虽然变化了,但并未导致页面的重新渲染
原因:
在arr改变的时候,value也跟着改变,导致我们改变arr的操作变为直接修改state,而没有通过setState来修改,最后在通过setState修改state的时候,导致修改后的state和之前的state一样,从而没有触发页面的更新。
为什么不能直接修改state呢?
我们来看react的生命周期:
react是通过setState来触发页面的渲染,而我们提前更改了state的值,导致在shouldComponentUpdate方法中,判断setState前后state值没有变化,导致他返回false,从而页面没有更新
引用其他人的回答:
改了state然后setState({})会怎样,如果你不做性能优化以阻止不必要的更新,那么这么做没有任何问题。但如果你要用sCU来阻止组件不必要的更新,那你是要在sCU里面判断新的state与旧的是不是一样的(===),如果是一样的,就不用更新,但如果按你的写法,对象变了,但还是同一个对象,sCU会返回false(因为sCU的一般写法就是判断新旧state/props是不是一样,不一样才返回true),则组件不更新,但其实数据已经变了,这就不对了。
解决:
const removeIndex = (index: number) => {
let arr = [...value];
arr.splice(index, 1);
setValue(arr);
};
将value进行深拷贝,然后改变arr的值,在setState,state改变,从而触发页面更新