javascript - 为什么当状态是可变的时，由javascript制成的useState函数不起作用？

Question

当我在研究 React Hooks 时，我看到了一个由 vanilla javascript 组成的 useState 函数示例。

function useState(initVal) {
  let _val = initVal

  const state = _val

  const setState = newVal => {
    _val = newVal
  }

  return [state, setState]
}

const [count, setCount] = useState(1)
console.log(count) // 1
setCount(2)
console.log(count) // 1 

虽然我将 state 声明为变量，但当 setState 函数使用 newValue 调用时，计数不会改变。

但是，当状态更改变量以如下所示运行时，

function useState(initVal) {
  let _val = initVal

  const state = () => _val

  const setState = newVal => {
    _val = newVal
  }

  return [state, setState]
}

const [count, setCount] = useState(1)
console.log(count()) // 1
setCount(2)
console.log(count()) // 2

计数开始改变。

发生这种情况是因为每当 count 函数调用时，它都会使用闭包通过 setState 函数引用 _val 的更改值？以及如何解释如何使用 JavaScript 中的闭包来解释反应钩子的工作原理？

标签： javascriptreactjs

Answer 1

当您解构时，您将获得带有数据副本的新的、不同的变量。

// simple explanation
const list = ['dog'];
const [animal] = list;
console.info(animal); // dog

// change the original
list[0] = 'cat';

// output
console.info(list[0], animal); // cat, dog

即使您按照以下方式重构以let正确使用和更新，您也不会得到原始值，因为没有引用它。

function useState(initVal) {
  let state = initVal

  const setState = newVal => {
    state = newVal;
  }

  return [state, setState];
}

const [count, setCount] = useState(1);
console.log(count); // 1
setCount(2);
console.log(count); // 1

// simple explanation
const list = ['dog'];
const [animal] = list;
console.info(animal);;

list[0] = 'cat';
console.info(list[0], animal);