时间戳

首页 > 解决方案 > 我试图在纯 JavaScript 中实现 useState 钩子以查看它的工作原理。下面是我的代码，但它不工作并进入无限循环

javascript - 我试图在纯 JavaScript 中实现 useState 钩子以查看它的工作原理。下面是我的代码，但它不工作并进入无限循环

问题描述

对我来说，React 能够在重新渲染之间保持函数组件内的状态变量值似乎有点神奇。所以我试图实现自己，看看事情是如何运作的。但是失败了。如果您可以指出一些好的资源，我可以在其中看到实现此过程的幕后内容，或者可以告诉我在代码中做错了什么。在这一点上，React 源代码对我来说有点难以理解。谢谢你。

  const MyReact = {
  state: null,
  stateInitialized: false,
  setState(newState) {
    if (this.state !== newState);
    {
      this.state = newState;
      Component();
    }
  },
  useState(initialValue) {
    if (!this.stateInitialized) {
      this.stateInitialized = true;
      this.state = initialValue;
    }
    return [this.state, this.setState];
  },
};

function Component() {
  const [count, setCount] = MyReact.useState(10);
  console.log(count);
  setCount(20);
}

Component();

标签： javascriptreactjs

解决方案

您的代码中有两个问题：

  1. setState():中的分号错误if (this.state !== newState);，导致无条件调用 of Component()，从而导致无休止的递归。
  2. 更微妙：在useState()中，您返回时this.setState没有将其绑定到MyReact，这会导致全局setCount()设置state（即在window对象上）。将其替换为this.setState.bind(this)。

推荐阅读