重新了解一下之前的单对象变化问题

2年之前写过一篇文章，有些误导，重新写一遍

声明一个方法

不管是在哪里，创建一个名为 single-object.jsx 的文件

export const singleObject = (newObj, oldObj) => {
  return JSON.stringify(newObj) == JSON.stringify(oldObj);
}

在页面面中监听这个对象的改变

import { useState, useEffect } from "react";
import { singleObject } from './common/single-object.jsx'

const App = () => {
  const [objOne, setObjOne] = useState({ name: "objOne" });
  const [objOneCopy, setObjOneCopy] = useState({});

  useEffect(() => {
    setObjOneCopy({...objOne});
  }, []);

  useEffect(() => {
    console.log(singleObject(objOne, objOneCopy));
  }, [objOne, objOneCopy]);

  const changeObj = async () => {
    await setObjOne({ name: "objOne_change" });
  }

  return (
    <div className="App">
      <div>objOne: {JSON.stringify(objOne)}</div>
      <div>objTwo: {JSON.stringify(objOneCopy)}</div>
      <button onClick={changeObj}>改变就是好事</button>
    </div>
  );
}

export default App;

总之，这段代码是利用与在你做出一个操作后，你想知道你这个对象有没有哪里发生过改变，如果对象的 keys 或者对象的value有发生过改变，就会返回 false，因为使用了 JSON.stringify 则会做出全方位的检查，能改变的应该也只有 key：value

                                      -- 填个坑