React类组件中如何实现类似函数组件的变量声明与复用？

当然没问题！在React类组件里完全能实现和纯函数组件类似的变量复用逻辑，不用每次都重复提取或创建变量。下面给你几种实用的实现方式：

1. 在render中挂载变量到实例（this） #

如果你的变量是从props/state中提取的、需要在render内的多个嵌套函数中复用，直接把变量挂载到组件实例（this）上就可以了：

class MyComponent extends React.Component {
  render() {
    // 从props提取变量并挂载到this
    this.something = this.props.nested.something;
    
    const checkValue = () => {
      // 直接通过this访问复用的变量
      return this.something === "value";
    };
    
    const logValue = () => {
      console.log("Current value:", this.something);
    };
    
    return (
      <div>
        <p>{checkValue() ? "值匹配！" : "不匹配"}</p>
        <button onClick={logValue}>打印值</button>
      </div>
    );
  }
}

注意：因为render会在props/state变化时重新执行，所以this.something每次都会被更新为最新的值，不用担心数据过时的问题。

2. 用类的实例方法+getter简化重复提取 #

如果你的复用逻辑是组件的独立方法（而非render内的嵌套函数），可以用getter方法封装变量的提取逻辑，避免在每个方法里重复解构props：

class MyComponent extends React.Component {
  // 用getter封装公共变量的提取逻辑
  get something() {
    return this.props.nested.something;
  }

  checkValue() {
    // 直接通过this.something访问，不用重复解构
    return this.something === "value";
  }

  logValue() {
    console.log("Current value:", this.something);
  }

  render() {
    return (
      <div>
        <p>{this.checkValue() ? "值匹配！" : "不匹配"}</p>
        <button onClick={() => this.logValue()}>打印值</button>
      </div>
    );
  }
}

这种方式让代码更整洁，而且所有方法都能共享同一个变量的提取逻辑，后期修改起来也更方便。

3. 静态/实例级公共变量（针对固定值） #

如果你的变量是不需要随props/state变化的静态值，或者只需要初始化一次的实例专属值，可以直接在类的顶层或构造函数中定义：

class MyComponent extends React.Component {
  // 静态变量：所有组件实例共享同一个值
  static sharedStaticValue = "所有实例都能用的固定值";

  constructor(props) {
    super(props);
    // 实例变量：每个组件实例拥有独立的变量
    this.instanceSpecificValue = "当前实例专属的值";
  }

  logVars() {
    console.log("静态共享值:", MyComponent.sharedStaticValue);
    console.log("实例专属值:", this.instanceSpecificValue);
  }

  render() {
    return <button onClick={() => this.logVars()}>打印公共变量</button>;
  }
}

这些变量可以在组件的任意方法中直接访问，完全不用重复创建。

内容的提问来源于stack exchange，提问作者Evanss