在 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

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

方法二是将原来的对象展开成一个新的对象来创建一个新的对象，这意味着钩子将不再引用原来的对象。

Answer 3

首先初始化对象应该这样写，用冒号代替等号

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>

}

在 React Hook 中设置一个对象

Setting an object in React Hook

javascript

reactjs

react-hooks