Javascript 在React钩子中设置对象

使用这两种方法在React Hook中设置对象有什么不同吗

const INITIAL_STATE = {
    foo = '',
    bar = ''
}

// ...

// Method 1
const [state, setState] = useState(INITIAL_STATE);

// Method 2
const [state, setState] = useState({ ...INITIAL_STATE });

---

这两种方法都很好，我只是想知道使用其中一种方法是否有任何缺点或优点。

useState

仅在第一次调用时使用初始状态。但是每次渲染时都会调用它，

{…INITIAL_STATE}

每次都会创建一个新的未使用对象。这个开销应该是不可见的。

方法1传入初始对象，这意味着钩子将始终使用对原始对象的引用

---

方法2通过将原始对象展开为新对象来创建新对象，这意味着钩子将不再引用原始对象。

首先，应使用冒号而不是等号将init对象写入如下内容

const INITIAL_STATE = {
    foo : '',
    bar : ''
}

在使用方法1时，钩子将引用

初始状态

，这意味着对该

初始状态

所做的任何更改也将影响该状态

例如，创建一个按钮并给它一个onClick函数来更新INITIAL_STATE.foo的值，也会影响STATE.foo，如果您使用console.log（STATE.foo），您可以看到该值已经更新

另一方面，方法2不会引用原始对象，而是在每次调用钩子函数时创建一个新对象，但是，如果

初始状态

有一个值为任何对象或数组的属性，则此解构行为只会进行浅层复制，当您更改

初始状态时，它也会引用该对象


function changeInitialState(){

  const INITIAL_STATE = {
     foo: '',
     bar: '',
     something: {
       name: 0
     }
  }

 const [state, setState] = useState({...INITIAL_STATE})

 return <button onClick={() => {
     INITIAL_STATE.something.name = 'hello';
     console.log(state.something.name) // you will see the name has been updated as well
  }}></button>

}



函数changeInitialState（）{
常量初始状态={
福：''，
酒吧：''，
一些东西：{
姓名：0
}
}
const[state，setState]=useState（{…初始状态}）
返回{
INITIAL_STATE.something.name='hello'；
console.log（state.something.name）//您将看到名称也已更新
}}>
}
< /代码>方法2创建一个新的对象，因此占用更多的内存和时间来启动，可能不相关，但在这种情况下，考虑使用<代码> UrError Enter /代码>。同样的评论和答案仍然适用。