使用Javascript在类方法中定义内部类变量？

Question

这个问题实际上与 React JS 相关。是否可以在其中一个类方法中定义内部类变量，然后在其他方法中使用它？我的意思是这样做：

class Something extends React.Component {
  state = {
      value: 'doesnt matter'
  };

  something = () => {
    //a lot is happening in here and at some point I define this.thing
    this.thing = 1;
  }

  increase = () => {
    if(this.thing) {
      this.thing += 1;
    }
  }

  decrease = () => {
    if(this.thing && this.thing > 0) {
      this.thing -= 1;
    }
  }

  render() {
    return (
      <span>this.state.value</span>
    );
  }
}

事情是我不需要把this.thing 作为状态值，因为我只需要在内部。请注意，此代码只是一个示例，实际代码要复杂一些，但主要问题是，可以像我在示例中那样定义类内部变量（this.thing）吗？或者也许我应该以不同的方式做到这一点？最佳做法是什么？

Answer 1

使用构造函数做这样的事情没有问题，但是基于react理论和UI渲染这种用法不会重新渲染或遵循触发和重新渲染的react模式，它只会服务器作为与 react 生命周期无关的值的存储。

class Something extends React.Component {
  constructor(props) {
    super(props);
    // Your thing
    this.thing = 0;
    this.state = {
      value: "doesnt matter."
    };
  }

  something = () => {
    //a lot is happening in here and at some point I define this.thing
    this.thing = 1;
  };

  increase = () => {
    if (this.thing) {
      this.thing += 1;
    }
  };

  decrease = () => {
    if (this.thing && this.thing > 0) {
      this.thing -= 1;
    }
  };

  render() {
    this.something();
    console.log(this.thing); // will equal 1.
    return <span>{this.state.value}</span>;
  }
}

Answer 2

我不需要把 this.thing 作为状态值，因为我只在内部需要它。

React 组件的 state 也应该只在内部使用。

最佳做法是什么？

您可以使用实例变量 (ivars) 而不是状态来提高性能，因为您可以减轻事件队列的负担。从美学上讲，ivars 通常需要更少的代码。但是状态更新通常是首选，因为它们会触发重新渲染；这种保证使您的代码更容易思考，因为渲染永远不会过时。在您的情况下，渲染函数独立于this.thing，因此可以将其存储在 ivar 中。

一般情况下最好在constructor中初始化ivars，因为它先运行，所以this.thing保证可以被其他方法消费：

constructor(props) {
  super(props);
  this.thing = 0;
}