初始化反应组件状态

Question

I came across some react code that defined a component state inside a class like follows:

// Snippet 1
class Sample extends React.Component {
    state = {
        count: 0
    }
}

The way I've learnt React was to declare the state inside the constructor of a class:

// Snippet 2
class Sample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
}

The only difference I can think of is that initializing the state in the constructor would guarantee the state gets initialized properly in the component life cycle.

What are the differences between the above two code snippets? In snippet 1, is it safe to assume that the state be properly set when the class is initialized?

Answer 1

What you're looking at is ES7+ Property Initializers . It is done this way because Facebook knows Javascript will change in the future. They want to be able to cope with those changes.

According to facebook ES7+ Property Initializers

Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript....

Here is the Facebook link Also more info here

also a Link to the proposal

Answer 2

在babel上使Class看起来更干净只是一种语法糖： https ： //babeljs.io/docs/plugins/transform-class-properties/