模拟实现useState的实现原理

React Hook如何保证每次渲染state不会丢失

众所周知，react 函数式组件是一个纯函数，那么他就不应该会缓存数据，但是我们的state却能将数据保留，为何？

React Hook 在实现中是通过使用闭包来保证每次渲染中的 state 不会丢失的。具体来说，当组件第一次渲染时，React Hook 会创建一个内部的状态变量，并将其存储在当前组件的内存中。随后，每一次重新渲染时，React Hook 都会将该变量重新捕获，并根据新的 state 进行更新。

这种方式的好处是可以确保每个组件实例都有自己独立的状态，并且不会与其他组件共享。同时，由于状态变量是通过闭包保护起来的，因此也可以避免一些常见的状态管理问题，比如因为异步操作导致的数据竞争或者卡顿等问题。

需要注意的是，React Hook 的工作原理并不是基于类似于 Redux 这样的全局状态管理方案。相反，每个 Hook 都被设计为一个独立的状态存储单元，只能在当前组件作用域内使用。这种方式需要开发者对组件之间的关系进行更加细粒度的管理，但也可以带来更好的可读性和可维护性。

如何模拟useState

实际上，我们可以借助 React 中的 useState Hook 的原理，通过闭包和函数式编程的思想来手动实现一个 useState 函数。

具体来说，我们可以在 useState 函数内部定义一个闭包，用于存储当前的状态值和修改状态的函数。同时，定义一个 setHookState 函数用于更新状态值并触发组件重新渲染。最后，useState 函数需要返回一个数组，其中第一个元素为当前状态值，第二个元素为修改状态值的函数。

function useState(initialValue) {
  // 创建闭包，用于存储当前的状态值和修改状态的函数
  const state = [initialValue];
  const setState = newState => {
    state[0] = newState;
    // 强制重新渲染组件
    render();
  };

  // 返回数组，第一个元素为当前状态值，第二个元素为修改状态值的函数
  return state.concat(setState);
}

// 定义全局变量，保存当前组件和对应的 DOM
let currentComponent = null;
let currentDOM = null;

// 渲染组件并挂载到页面上
function render() {
  // 如果当前组件为空，则直接返回
  if (!currentComponent) {
    return;
  }

  // 渲染组件并获取对应的 DOM
  const nextDOM = currentComponent();

  // 如果当前 DOM 存在，则替换它
  if (currentDOM && currentDOM.parentNode) {
    currentDOM.parentNode.replaceChild(nextDOM, currentDOM);
  }

  // 更新全局变量
  currentDOM = nextDOM;
}

// 定义组件函数
function Counter() {
  const [count, setCount] = useState(0);

  // 点击按钮时更新状态
  const handleClick = () => setCount(count + 1);

  // 渲染计数器组件
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

// 初始化当前组件
currentComponent = Counter;

// 挂载组件到页面上
render();

需要注意的是，这个模拟实现并不完整，它仅仅演示了 useState Hook 的一个基本原理。在实际开发中，我们应该优先使用 React 内置的 Hook 函数，避免出现一些潜在问题。