ReactJS-组件状态和类变量之间有什么区别？

Question

我认为它的工作方式有所不同，但我不知道它是如何工作的。

1。使用类变量

export default class Test extends Component {
  constructor() {
    this.active = false;
  }

  render() {
    this.active = this.props.name === 'Dan'? true : false;
    return (
      <div>
        {this.active? 'ssup?' : 'noooo'}
      </div>
    );
  }
}

2。使用React组件状态

export default class Test extends Component {
  constructor() {
    this.state = { active: false };
  }

  render() {
    if(this.props.name === 'Dan') {
      this.setState({active: true});
    }
    return (
      <div>
        {this.active? 'ssup?' : 'noooo'}
      </div>
    );
  }
}

我认为如果仅受收到的道具影响，就不需要使用State进行重新渲染。

Answer 1

两者之间的区别在于，状态更改时（使用this.setState(/*...*/)），React将重新渲染您的组件。

如果您更新类变量，React将不会意识到它，也不会重新呈现您的组件。

请注意，您在代码中实现的目标不需要状态或类变量。您只是直接从道具中计算出另一个价值。编写组件的更好方法是：

export default class Test extends Component {
  render() {
    const active = this.props.name === 'Dan';
    return (
      <div>
        {active? 'ssup?' : 'noooo'}
      </div>
    );
  }
}

Answer 2

您问题的简单答案是，使用state可以调用setState()，后者会自动调用render()。 class variables无法获得

要在更改变量后更改组件，请使用state variables。

当您不想自动调用render()时，可以使用class变量