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

两者之间的区别在于，当状态发生变化时，React 会重新渲染你的组件（使用 this.setState(/*...*/) ）。

如果你更新类变量，React 将不知道它，也不会重新渲染你的组件。

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

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

Answer 2

对你的问题的简单回答是，通过使用state，你可以调用自动调用render()的setState()。这是class variables
无法获得的

如果要在更改该变量时更改组件，请使用"状态变量"。

当你不想自动调用'render（）'时，你使用'class'变量

Answer 3

React 组件仅在state或class发生变化时才重新渲染。但是更新类变量不涉及任何内容，因此它不会触发渲染。

虽然使用 state 可能看起来类似于类变量，但 state 是 React 中受保护的关键字，指的是存储的组件数据。使用类变量和状态之间的主要区别在于更新数据。无需手动重新分配变量，而是调用 this.setState() 。

当你打电话给this.setState().它将此新状态与以前的状态进行比较。如果有更改，React 会重新渲染组件，从而在屏幕上显示更新的计数值。

但是当你更新类变量时，它肯定会更新，但不会重新渲染。您可以使用 this.forceUpdate() .但通常情况下，您应该尽量避免使用forceUpdate()，只阅读this.props和this.state render()。

有关详细信息，请参阅此文章。