Javascript React类组件更新重新渲染中类变量的值，但不更新函数组件

我在玩ReacJS。我注意到一件事- 在重新呈现类组件的情况下，类变量的更新值在屏幕中更新，如下所示：

import React, { Component } from "react";

class Temp extends Component {
  constructor(props) {
    super(props);
    this.count = 0;
    this.state = {
      foo: 0,
    };
  }
  render() {
    return (
      <button
        onClick={() => {
          this.setState({ foo: this.state.foo + 1 });
          this.count++;
        }}
      >
        {this.count} - {this.state.foo}
      </button>
    );
  }
}

export default Temp;

import React，{Component}来自“React”；
类临时扩展组件{
建造师（道具）{
超级（道具）；
此值为0.count；
此.state={
傅:0,，
};
}
render（）{
返回(
{
this.setState（{foo:this.state.foo+1}）；
这个.count++；
}}
>
{this.count}-{this.state.foo}
);
}
}
导出默认温度；

但是，如果是函数组件t，则在重新渲染期间，普通变量的更新值不会在屏幕中更新

import React，{useRef，useState}来自“React”；
常量引用组件=（）=>{
常量[stateNumber，setStateNumber]=useState（0）；
设refVar=0；
函数incrementAndDelayedLogging（）{
setStateNumber（stateNumber+1）；
refVar++；
}
返回(
点击
状态：{stateNumber}
refVar:{refVar}
);
};
导出默认引用组件；

这是React的实现方式还是我在胡闹？我很想知道这件事。

---

谢谢

这是功能组件的结果

这样想：每次更新状态变量或更新属性时，都会再次调用函数。所有变量声明都将再次发生（状态是一种特殊情况），因此

let refVar=0再次被调用

如果需要该变量用于多个渲染，则需要在重新渲染后仍然存在的上下文中声明该变量

您至少有两种方法可以实现这一目标


使用
useState
在模块级别声明它，但要知道
RefComponent
的所有实例都将共享同一个实例
React中的功能组件没有实例，因此类或实例变量之类的东西不一定有意义；正如其他人在这里的评论中指出的那样，React将呈现（调用）功能组件并“重置”任何未显式状态的局部变量

从文档中：

useRef（）
Hook不仅仅用于DOM引用。“ref”对象是一个通用容器，其
current
属性是可变的，可以保存任何值，类似于类上的实例属性

每次呈现（调用）函数RefComponent时，它都执行
let refVar=0因此每次渲染时都会创建refVar。您可以这样做：
constrefvar=React.useRef（0）然后
refVar.current++
和
refVar:{refVar.current}
谢谢。是的，我对useRef很熟悉，实际上我不是在寻找解决这个问题的方法，我只是想知道为什么会这样。但我感谢你的答复。另一个查询，类组件不是像函数组件一样被调用吗？不，函数组件只是一个返回jsx的函数，类组件是一个类（在JavaScript中也只是一个函数，但称为
new MyClass（）
）。因此，类组件中的
name
是一个实例属性（也称为成员），而函数组件中的name只是您每次调用它时设置的变量。您可以执行useRef，然后您可以更改它，而无需组件重新呈现，就像类的实例变量一样。谢谢。是的，我对useRef很熟悉，实际上我不是在寻找解决这个问题的方法，我只是想知道为什么会这样。但我感谢你的答复。另一个查询，类组件不是像函数组件一样被调用吗？@Mateen您似乎不熟悉构造函数（JS没有类，只有protype和构造函数）。类组件是一个类组件，它的用法类似于
new component（）.render（）
，而函数组件则被称为
jsx=component（props）
对不起，我确实知道类只是语法上的糖分，我们是如何处理原型函数链的，后来又是如何处理new关键字的。但我在这里没有做到。我问的都是关于React渲染机制的问题。现在我明白了。谢谢
import React, { useRef, useState } from "react";

const RefComponent = () => {
  const [stateNumber, setStateNumber] = useState(0);
  let refVar = 0;

  function incrementAndDelayedLogging() {
    setStateNumber(stateNumber + 1);
    refVar++;
  }

  return (
    <div>
      <button onClick={incrementAndDelayedLogging}>Click</button>
      <h4>state: {stateNumber}</h4>
      <h4>refVar: {refVar}</h4>
    </div>
  );
};

export default RefComponent;