react浅比较导致视图不更新或更新异常

项目场景：

例如：选择勾选

---

问题描述

默认勾选全部列表，取消勾选，勾选内容也会列表内丢失

原因分析：

由于该数据由后端返回切默认选中全部，初始状态设置了setList(res.data)和setSelectList(res.data), 导致全部list和selectList使用一个引用地址

---

解决方案：

不使用同一个引用地址的数据，可以使用cloneDeep或者创建新对象赋值，

心得

React 需要的是知道 state 何时改变了，但 React 无法监控深层次的 state 对象变化。 为了不小心改变了深层次的对象但 React 不知道，使用 Immutable，使得程不能修改原对象，只能创建新对象，这样两个对象的引用地址不同，浅比较保证 React 一定能监控到变化。

转载：https://www.zhihu.com/question/446377023