小编lis*_*nge的帖子

import { useState } from "react";

function App() {
  const [form, setForm] = useState({
    usename: ``,
    password: ``,
    avatar: { id: 0, url: ``, deep: { id: 0 } },
  });
  return (
    <div>
      <h1>ID:{form.avatar.deep.id}</h1>
      <h2
        onClick={() => {
          form.avatar.deep.id += 1;
          setForm({ ...form });
        }}
      >
        Change-ID
      </h2>
    </div>
  );
}

export default App;

代码沙盒在线运行

我学习了 reat hooks，人们告诉我不要更改嵌套对象。

我们应该保持原来的状态不变或者使用https://github.com/immerjs/immer

但是上面的代码也可以更新UI，为什么呢？

有什么form.avatar.deep.id+=1;setForm({ ...form });缺点？

直接改变嵌套对象的属性有什么缺点？