在React Hook中设置一个对象

Question

使用这两种方法在React Hook中设置对象是否有区别？

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

// ...

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

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

这两种方法都可以正常工作，我只是想知道使用其中一种方法是否存在任何后退或优势。

- user2652157

---

方法2会创建一个新对象，因此需要更多的内存和启动时间。 - Logan Murphy

也许不太相关，但在这种情况下，考虑使用 useReducer。相同的评论和答案仍然适用。 - Corey

Answer 1

useState 在第一次调用时仅使用初始状态，但它将在每次渲染时被调用， { ...INITIAL_STATE } 将每次创建一个新的未使用的对象。这种开销应该是无法察觉的。

- UjinT34

Answer 2

首先，应该将init对象写成以下形式，使用冒号而不是等号。

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

使用方法1时，钩子将引用INITIAL_STATE，这意味着对此INITIAL_STATE所做的任何更改也会影响状态。

例如，创建一个按钮并为其提供一个onClick函数以更新INITIAL_STATE.foo的值，也会影响state.foo，如果您console.log(state.foo)，您可以看到该值已被更新。

另一方面，方法2不会引用原始对象，而是在每次调用钩子函数时创建一个新对象，但是，此解构行为仅执行浅复制，如果INITIAL_STATE具有任何对象或数组值的属性，则在对INITIAL_STATE进行更改时也将引用该对象。

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>

}

- Elantris

Answer 3

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

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

- Shannon Johnstone