React中响应式数据变了界面却未更新（重新渲染） 踩坑！！

背景：点击按钮，触发为数组push对象，但是界面却未更新

数组是引用类型直接赋值再修改，会导致引用未变

let [testArr, setTestArr] = useState([])
 
let _arr = testArr;
_arr.push('test')
setTestArr(_arr)

useState修改后，useEffect其实未监听到

所以要重新创建一个数组

let [testArr, setTestArr] = useState([])
 
let _arr = JSON.parse(JSON.stringify(testArr));
// 或者
let _arr = [...testArr];
_arr.push('test')
setTestArr(_arr)

useEffect监听数据变化时，只有在数组元素类型为基本数据类型时可以起到作用。但对于复杂数据类型如：对象，数组和函数来说，React会使用referential equality来对比前后是否有不同。

React会检查当前渲染下的这个对象和上一次渲染下的对象的内存地址是否一致。两个对象必须是同一个对象useEffect才会跳过执行effect。所以，即使内容完全相同，内存地址不同的话，useEffect还是会执行effect。