javascript - 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>
    );
  }
}

我认为如果它仅受收到的 Prop 影响，则不需要使用 State 重新渲染。

Answer 1

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

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

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

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