【问题标题】：ReactJS - What is difference between component state and class variable?ReactJS - 组件状态和类变量有什么区别？
【发布时间】：2019-01-29 19:18:09
【问题描述】：

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

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 重新渲染。

【问题讨论】：

以上代码为示例。 'active' 还需要运行其他逻辑。
组件的输出通常取决于传入的 props，可选地取决于它自己的内部状态。如果通过setState 更改状态，则计划重新渲染组件。请注意，由于这个事实，您实际上不能在 render 内调用 setState。类变量主要用于存储副作用数据，例如订阅 ID，以便在组件卸载时取消订阅。您的示例既不保证类变量也不保证状态。
你的例子没有意义。为什么要有状态？您的组件是 name 属性的纯函数。
请只关注差异。对不起我的坏样本:(
以下任何答案是否能帮助您找到不同之处？

标签： javascript reactjs react-native

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您的问题的简单答案是，通过使用state，您可以调用setState()，它会自动调用render()。 class variables获取不到的

当您想在变量发生更改时更改组件时，您可以使用“状态变量”。

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

【讨论】：

【解决方案3】：

React 组件仅在 state 或 class 发生更改时重新渲染。但是更新类变量两者都不涉及，所以它不会触发渲染。

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

当您致电this.setState() 时。它将这个新状态与之前的状态进行比较。如果有变化，React 会重新渲染组件，从而在屏幕上显示更新后的计数值。

但是当您更新类变量时，它肯定会更新但不会重新渲染。您可以使用this.forceUpdate() 来执行此操作。但通常你应该尽量避免使用forceUpdate()，并且只读取render()中的this.props和this.state。

详细信息请参阅this 文章。

【讨论】：