React Hook useState复杂数据更新机制踩坑

这里主要用Hook来讲述和做示范(大部分人应该已经全面拥抱Hook了吧)。class组件用setState更新state中某个复杂数据类型，理论上也是差不多的。

很多时候我们某个state数据不是简单数据类型(值类型)，而是数组、对象之类(引用类型)。而React组件的更新机制对state只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，那就不会重新渲染组件。

因此，尤其当被更新的引用类型数据需要依赖之前的数据，我们可能会疏忽而犯下以下低级错误(真的不是我本人😂)：

  // 简单示范，看个意思就好，就不把完整组件放出来了
  const [filterList, setFilterList] = useState([]) 

  const changeFilter = (key, val, mulit, i) => { // 关键值
    setFilterList(prevList => {
      prevList[i].checked = !prevList[i].checked
      console.warn(prevList === filterList) // true
      return prevList // prevList和filterList指向同一个地址
    })
    // 或者
    setFilterList(prevList => {
      let list = prevList // 仍然是同一个引用地址
      list[i].checked = !list[i].checked
      return prevList
    })
  }

  useEffect(() => {
   console.warn(filterList) // 触发setFilterList后不会有反应
  },[filterList])

也就是说，更新复杂state的时候必须传给它一个全新的对象，而不是复制了它引用地址再修改的对象。

两种解决办法：

1. 结合展开运算符返回一个新对象，后面这个链接也有和我类似的示例：setState 的函数式更新形式

setFilterList(prevList => {
  prevList[i].checked = !prevList[i].checked // 这里数据引用地址的值同样被修改
  return [...prevList] // 数据最外层的引用地址不同即可触发组件更新
})

2. 深拷贝对象，用全新的副本更新数据。
   一般情况像这样非单个层级的对象，比如我的filterList是对象数组，用slice()方法并不能实现里面每个对象的深拷贝。实现真正的深拷贝我们可以封装遍历方法或者借助lodash.cloneDeep那些库来实现。但组件state的更新我们本来就要修改原来的数据，复杂对象内层数据同时被改变在这种情况不属于bug。只要最外层引用地址不同，能触发组件更新就可以了。

setFilterList(prevList => {
  const list = prevList.slice() // 数组里面的每个对象没有实现深拷贝但对我们没有影响
  list[i].checked = !list[i].checked 
  return list // list指向一个全新的地址
})

额外：
const arrCopy = sourceArr.slice() 深拷贝简单数组
const objCopy = Object.assign({}, sourceObj) 深拷贝简单Object
注意：当对象中只有一级属性，没有二级属性的时候，Object.assign()方法为深拷贝，但是对象中有对象的时候，此方法在二级属性以后就是浅拷贝。

再引申一下，一些所谓不会改变原数组的方法，比如map、forEach。针对的是简单数组(只有一层数据)，如果是非单层的比如对象数组，在方法内修改了对象内部的数据，原数组的相应的数据也会改变。另外map和forEach的区别就是forEach没有返回值(undefined)。所以基本功一定要扎实，我就是吃了没有打好基础的亏😂

在这种情况如何不改变原数组引用地址内的数据，那就是在修改的时候新开辟一个引用地址，是不是和我们更新复杂类型state很像😄？

let arr = [{ name: 'Anna', age: 16 }, { name: 'James', age: 18 }]
let newArr = array.map((item) => {
  // item.like = 'eat'; // 像这样会改变原数组内部数据
  const obj = { ...item, like:'eat'};
  return obj;
})
console.log(arr); // [{ name: 'Anna', age: 16},{ name: 'James', age: 18}]
console.log(newArr);//[{ name: 'Anna', age: 16,like: "eat"},{ name: 'James', age: 18,like: "eat"}]

当然我们也可以直接整上lodash

对象数组深拷贝总结示例 ：

const _ = require('lodash');
let arr = [{ name: 'Anna', age: 16 }, { name: 'James', age: 18 }]
// 方法一
let arr1 = arr.map(o => Object.assign({}, o));
// 方法二
let arr2 = arr.map(o => ({...o}));
// 方法三（推荐）
let arr3 = _.cloneDeep(arr);