使用构造函数和state = {}在react组件中声明状态有什么区别？

Question

我发现有两种方法可以在类组件中声明状态,如下所示

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'John'
        }
    }

    render() {
        return  <div>{this.state.name}</div>
    }

}

和

class App extends Component {
    state = {
       name: 'John'
    }

    render() {
        return  <div>{this.state.name}</div>
    }

}

这两者有什么区别？

Answer 1

它们大致相同.显着的区别在于第二个例子中的初始化程序之前执行constructor.

第二种方法使用类字段提议.

它不是ECMAScript标准的一部分,因此您需要正确设置transpiler才能使用第二种方法.

UPD查看Babel输出以更好地了解公共实例字段的工作方式.

Answer 2

当您想将props数据保存到时使用构造函数state

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'John'
    }
  }
}

否则你可以直接设置state硬编码数据

class App extends Component {
  state = {
    name: 'John'
  }
}