javascript - 在 React 组件中使用 constructor 和 state = {} 声明状态有什么区别？

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

它们大致相当。显着的区别在于第二个示例中的初始化程序在构造函数之前执行。

第二种方法使用 class fields提案。

它还不是 ECMAScript 标准的一部分，因此您需要正确设置转译器才能使用第二种方法。

UPD 看看 Babel output更好地了解公共(public)实例字段的工作原理。