这里实现一个非常简单的类似 useState Hook 用于保存组件状态功能

（React Hook——用于解决函数组件无状态的问题）

本质：函数的闭包

实现：通过重新设置状态后，保存到外部函数中，并记录下最新的设置好的状态，然后重新渲染组件，使组件内部数据为设置后的最新数据；

而在Hook之前函数组件中无论设置多少次新状态，重新渲染后都只能拿到最初始的状态；（即无状态）

简易实现：

// useState.js
import ReactDOM from "react-dom";
import App from "./App";

let _state = []; //   可提取到全局用于记忆状态
let _index = 0; //   对应源码类似链表结构索引数据(暂未看过源码,源码的实现非常复杂~具体以后回来补🙌)

export const useState = (init) => {
  // 用于保留局部各自的索引
  const curIndex = _index;

  // 若为初始渲染的第一次则使用默认值（这里有个小bug，设置state为undefined后却会返回初始值,但这不是重点）
  _state[curIndex] = _state[curIndex] === undefined ? init : _state[curIndex];

  // 返回用于更新状态的方法
  const setState = (val) => {
    _state[curIndex] = val;
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    // 用于重置索引，否则更新组件后无法按顺序获取到对应数据
    _index = 0;
  };

  // 更新下一个数据索引值
  _index += 1;

  return [_state[curIndex], setState];
};

// 其中还可以加入使用 Object.is() 用于判断优化进行比较更新

参考资料：

• 阅读源码后，来讲讲React Hooks是怎么实现的 - Jokcy