这是闭包在 useState 钩子中的工作方式吗？

Question

我正在尝试了解如何使用纯 Javascript 实现 useState 挂钩。我卡在了使用闭包的部分。

这是代码。

    const React = (function () {
      let hooks = [];
      let idx = 0;

      function useState(initVal) {
        const _idx = idx;
        console.log(_idx) // 0, 1

        const state = hooks[idx] || initVal;

        const setState = newVal => {
          hooks[_idx] = newVal;
        };

        idx++;
        return [state, setState];
      }

      function render(Component) {
        idx = 0;
        const C = Component();
        C.render();
        return C;
      }

      return { useState, render };
    })();

    function Component() {
      const [count, setCount] = React.useState(1);
      const [text, setText] = React.useState('apple');

      return {
        render: () => console.log({ count, text }),
        click: () => setCount(count + 1),
        type: (word) => setText(word),
      }
    }

    var App = React.render(Component); // {count: 1, text: "apple"}
    App.click();
    var App = React.render(Component); // {count: 2, text: "apple"}
    App.type('pear');
    var App = React.render(Component); // {count: 2, text: "pear"}

调用 setState 函数（点击或键入）时，它会根据索引更新 hooks 数组的值，索引为 0 表示计数，1 表示文本。

这意味着 useState 中的 setState 函数通过 javascript 闭包记住每个状态（计数和文本）的 _idx 值？

Answer 1

Which means setState function inside useState remembers the value of _idx of each state(count and text) by javascript closure?

是的。当调用 useState 时，它使用 idx 获取下一个可用索引并将其存储在常量 _idx 中。返回的 setState 函数形成一个闭包，因为即使 useState 已完成执行，它仍会记住与其状态对应的 _idx。

I stuck at the part where the closure is used.

其他使用闭包的地方：

useState 和 render 函数形成了 hooks 和 idx 的闭包。因此，即使在 React（一个 iife）完成执行后，函数也能够 read/write 这些变量。
render、click 和 type 函数形成一个闭包。 render 方法结束于 Component。因此，即使在 Component 函数执行完毕后，它也能够访问 count 和 text。类似地，click 和 type 形成一个闭包，因此可以调用 setCount 和 setText 定义在 Component 范围内的函数。

这是闭包在 useState 钩子中的工作方式吗？

Is this how closure works in useState hook?

javascript

closures

reactjs