在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 });

这两种方法都可以正常工作，我只想知道使用一种后备或优势是否有其他方法。

Answer 1

useState仅在第一个呼叫上使用初始状态。但是每个渲染都会调用，{ ...INITIAL_STATE }每次都会创建一个新的未使用对象。这个开销不应引人注目。

Answer 2

首先，使用结肠代替相等的符号将init对象写为以下内容。

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

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

例如，创建一个按钮并给它提供一个单击函数以更新priginal_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>
}

Answer 3

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

方法2通过将原始对象扩展到新对象中，这意味着钩子将不再引用原始对象。