react更改多层对象变量的方法 - ฅ˙

以下是我的测试组件中：

import React, { useEffect, useState } from 'react';export default function Home() {const [obj, setObj] = useState({ a: { t: 1 }, b: { t: 333 } }){ console.log(1111, '重新执行') }const ceshi = () => {setObj(pre => ({...pre,a: {...pre.a,t: pre.a.t + 1}}));/*setObj(pre => {const newObj = { ...pre }newObj.a.t = 55;return newObj;});*/// const objNew = JSON.parse(JSON.stringify(obj));// objNew.a.t = objNew.a.t + 1;// setObj(objNew);}useEffect(() => {console.log("🚀 ~ Home ~ obj:", obj)}, [obj])useEffect(() => {console.log("🚀 ~ Home ~ 具体字段a:", obj.a)}, [obj.a])useEffect(() => {console.log("🚀 ~ Home ~ 具体字段b:", obj.b)}, [obj.b])return <>{console.log(1111, '重新渲染')}<div onClick={ceshi}>ceshi-{obj.a.t}-{obj.b.t}</div></>;
}

1. 使用JSON.parse(JSON.stringify(obj))深度克隆
   深度克隆每个key引用都变，以上三个useEffect监听都能监听到
   但是性能差，还可能数据丢失

setObj(pre => ({...pre,a: {...pre.a,t: pre.a.t + 1}}));

这种只更新了对象中的a，所以obj.b监听不到
3.

setObj(pre => {const newObj = { ...pre }newObj.a.t = 55;return newObj;});

这种只更新了obj.a.t, obj.a和obj.b都监听不到，但是页面会更新（以为obj变了组件会重新执行）
4. 使用 Immer

import { produce } from 'immer';setObj(produce(draft => {draft.a.t += 1;// b 自动保持原样，Immer 会正确处理
}));

总结，我一般使用2或者3比较多，具体更新整个key，哪个key，还是更新最里面的字段，需要根据业务场景来定；
比如说我子组件a监听属性a，b组件监听属性b，那我希望父组件更新的a属性的时候，b组件监听的b不要执行,那就需要父元素只改a的引用；