Hooks 是如何在内部实现的？答案

【问题标题】：How are hooks internally implemented?Hooks 是如何在内部实现的？
【发布时间】：2020-06-24 03:37:42
【问题描述】：

最近我一直在阅读有关钩子的内容，很想知道它们是如何在内部实现的。

import React, { useState } from 'react';

function CounterUsingHooks() {
  const [count, setCounter] = useState(5);

  return (
    <div>
      <button onClick={() => setCounter(count + 1)}>
        {count}
      </button>
    </div>
  );
}

我知道 UseState 接受初始值并返回一对，在数组销毁时设置为 count 和 setCounter，其中 count 设置为 useState 返回的第一个值，setCounter 是第二个。

我只是对将函数绑定到变量部分感兴趣。

为什么需要分配给 UseState ？以上面的例子我可以写如下：

var count;
var setCounter=function(count){

count= count+1;
}

有人可以解释一下 UseState 是如何实现的吗？

【问题讨论】：

请参考：medium.com/the-guild/…
阅读更多关于 React 如何更新 dom 元素的信息。当您调用此 setCounter 函数时，它在内部使用虚拟 dom 来比较 2 个不同的状态，然后它会相应地更改实际 dom。
React 源代码：github.com/facebook/react/blob/master/packages/react/src/… 另外，请阅读 Reconciliation，这就是 react 的状态和生命周期管理的工作原理。如果写得体面，文档是一个很好的信息来源。

标签： javascript reactjs react-hooks

【解决方案1】：

首先，你需要了解 React 中State 的基础知识。

State 是一个 JavaScript 对象，它存储组件的动态数据并确定组件的行为。由于状态是动态的，它使组件能够跟踪渲染之间的变化信息，并使其具有动态和交互性。

【讨论】：