Closure-Mistake index of array in self-implemented useState-Function（学习用）

Question

我正在思考 react 的 useState-Function 并尝试为我自己实现一种简单的复制版本（基本上只是为了学习目的）。我遇到了一个非常愚蠢的问题，我只是被困住了。可能很简单，事后我对自己很生气...:)

let state = []

const myState = (init) => {
    state[0] = init
    const setState = newState => state[0] = newState
    return [state, setState] // return [state[0], setState] does not work
}

const [count, setCount] = myState(0)

console.log(count)
setCount(1)
console.log(count)

上面的这个版本确实有效，事实上我正确地注销了状态数组：[0]，[1]

但是当我在 myState-Function 中 return [state[0], setState] 时，我得到： 0, 0

这里出了什么问题？（我只用了 node.js）

Answer 1

简而言之，您得到的结果是意料之中的。它以这种方式发生，因为 state[0] 是一个原始值，当你 return [state[0], setState] 从你的 myState 钩子你只是 return 原始值，这不是在这次通话后更新了 myState(0).

当您 return 整个状态 (return [state, setState]) 时，您 return 一个 link 到这个数组，这就是为什么您能够看到更新的值。

为了更深入地研究，我建议学习 React 如何渲染组件和更新状态。没有它，仅仅了解 useState 的工作原理是不够的。

React 的工作方式有点复杂，因此在更改挂钩中的状态后，它会在内部触发 re-rendering，因此您将在组件中获得更新的状态

Closure-Mistake index of array in self-implemented useState-Function（学习用）

Closure-Mistake index of array in self-implemented useState-Function (for learning purposes)

closures

reactjs

use-state