javascript - 这是闭包在 useState 钩子(Hook)中的工作方式吗？

Question

我想了解如何使用纯 Javascript 实现 useState Hook 。我卡在了使用闭包的部分。

这是代码。

    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 函数(点击或输入)被调用时，它根据索引更新钩子(Hook)数组的值，计数为 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.

其他使用闭包的地方:

React 模块内的
• useState 和 render 函数在 hooks 和 idx 上形成一个闭包。因此，即使在 React(一个 iife)完成执行后，函数也能够读取/写入这些变量。
• render、click 和 type 函数形成一个闭包。render 方法关闭 Component。因此，即使在 Component 函数执行完毕后，它也能够访问 count 和 text。类似地，click 和 type 形成一个闭包，因此可以调用在 中定义的 setCount 和 setText 函数>组件范围。