React useState 是如何工作的？ vanilla js怎么可能呢？答案

【问题标题】：React useState how it works? How can It be with vanila js?React useState 是如何工作的？ vanilla js怎么可能呢？
【发布时间】：2023-03-03 06:58:26
【问题描述】：

想了解，如何用纯js搭建。我希望它是这样的：

const useStatePureJs = () => {
  let state = null;
  
  const setState = (value) => {
    state = value
  };

  return [
    state,
    setState
  ];
};

const [state, setState] = useStatePureJs();

setState(5);

console.log(state);

但由于范围初始化，我的 console.log 将返回 null。如何使用纯 js 实现对其进行更新？我的意思是价值。我需要看守者还是什么？

【问题讨论】：

initialState 在useState() 中默认不为空。
是的，但它不会在调用 setter 后更新值。所以初始状态不是问题
如果您不确定implementation 是如何工作的，为什么不查看实际的implementation？
谢谢，但是有一些“噪音”提到了记忆和检查 initialState 是否是一个函数。完全了解如何仅使用 js 来完成它并不是很清楚。是的，如果状态将被包装到一个闭包中，我可以让它工作，但在这种情况下，我需要将它称为一个函数，而不是一个值......

标签： javascript reactjs react-hooks

【解决方案1】：

这个呢？ ? 似乎可以正常工作。

const useStatePureJs = () => {
  let state;
  const getState = () => {
    return state
  }
  const setState = (x) => {
    state = x
  }
  return [ getState, setState ]
}

const [ getState, setState ] = useStatePureJs()
setState(1)
console.log(getState()) // 1
setState(2)
console.log(getState()) // 2

【讨论】：

并非如此。重点 - 我们需要将值用作变量，而不是函数调用。所以 getState - 作为反应。不是 getState()