为useState（）钩子字符串化Object以避免重新呈现是好的做法吗

Question

根据这个和那个问题，扩展运算符似乎用于更新在USESTEST钩子中管理的对象。

我创建了一个超级简单的示例，发现即使对象的内容没有改变，也会触发重新呈现（这很清楚，因为对象改变了）：

import React from "react";

function useFriendStatus() {
  const [person, setPersonProps] = React.useState({name:'Mark',age:23});

  React.useEffect(() => {
    console.log("rerender");
    const interval = setInterval(() => {
      setPersonProps({...person});   //simply set the object again -> no content changed
      console.log('update');
    }, 1000);
    return () => clearInterval(interval);
  }, [person]);


  return person;
}

export default function App() {
  const person = useFriendStatus();

  return <div className="App">Hello World: {"" + person.name}</div>;
}

在这里，您可以看到我的探查器的截图，它显示重新呈现似乎被激发（即使显示的名称没有改变）：

把一切都严格起来不是更好吗？

import React from "react";


function useFriendStatus() {
  const [person, setPersonProps] = React.useState(JSON.stringify({name:'Mark',age:23}));

  React.useEffect(() => {
    console.log("rerender");
    const interval = setInterval(() => {
      const personCopy=JSON.parse(person);
      setPersonProps(JSON.stringify({...personCopy}));
      console.log('update');
    }, 1000);
    return () => clearInterval(interval);
  }, [person]);


  return person;
}

export default function App() {
  const person = JSON.parse(useFriendStatus());

  return <div className="App">Hello World: {"" + person.name}</div>;
}

你在实践中是如何处理的？

Answer 1

我创建了一个超级简单的示例，发现即使对象的内容没有改变，也会触发重新呈现（这很清楚，因为对象改变了）

它与对象的“内容”无关，您的组件重新呈现是因为您创建了对象的浅层副本{...person}（更改其引用）。

在呈现阶段，React将与以前的状态进行粗浅的比较，以确定是否会发生呈现，在javascript中，{}==={}总是false。

“只有当对象的name属性更改时，才应重新呈现”

通常在调用setstate之前添加一个条件：

React.useEffect(() => {
  const newPerson = { ...person }; // fetch from some source
  // or check if person.name !== newPerson.name
  if (!isEqual(person, newPerson)) {
    setPerson(newPerson);
  }
}, [person]);