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进行的任何更改也会影响状态。

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

另一方面，方法2不会引用原始对象，而是在每次调用hook函数时创建一个新对象，但是，如果{{1} }的属性值为任何对象或数组，当您对INITIAL_STATE进行更改时，它也会引用该对象。

INITIAL_STATE

Answer 3

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

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

在React Hook中设置对象

3 个答案: