React Class组件在重新渲染时更新类变量的值，但不更新功能组件

Question

我正在玩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, { 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;

这是React的实现方式，还是我搞砸了？我很好奇。谢谢

Answer 1

这是功能组件的结果。

像这样想：每次更新状态var或更新prop时，都会再次调用函数。所有变量声明将再次发生（状态是一种特殊情况），因此let refVar = 0;被再次调用。

如果您需要该变量可用于多个渲染，则需要在可重新渲染的上下文中声明该变量。

您至少有两种方法可以实现此目的

• 用useState声明它的状态
• 在模块级别进行声明，但知道您的所有RefComponent实例都将共享同一实例

Answer 2

React中的功能组件没有实例，因此类或实例变量之类的东西不一定有意义；就像其他人在这里的评论中指出的那样，React将渲染（调用）功能组件并“重置”未显式声明的任何局部变量。 Behavior like instance variables for functional components are achieved with useRef。

来自文档：

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