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

使用构造函数执行此操作不是问题，但是基于反应理论和UI渲染，这种用法不会重新渲染或遵循触发器和重新渲染的反应模式，而只是服务器作为与反应生命周期无关的值的存储。

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通常需要更少的代码。但是通常最好使用状态更新，因为它们会触发重新渲染。这种保证使您的代码更容易考虑，因为渲染永不过时。在您的情况下，render函数独立于this.thing，因此可以将其存储在ivar中。

通常，最好在constructor中初始化ivars，因为它首先运行，因此可以保证this.thing已准备好供其他方法使用：

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

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

2 个答案: