Инициализация состояния компонента react

я наткнулся на некоторый код реакции, который определил состояние компонента внутри класса следующим образом:

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

способ, которым я научился реагировать, состоял в том, чтобы объявить состояние внутри конструктора класса:

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

единственное различие, о котором я могу думать, заключается в том, что инициализация состояния в конструкторе гарантирует, что состояние будет инициализировано должным образом в жизненном цикле компонента.

каковы различия между этими двумя фрагментами кода? В сниппет 1, Можно ли предположить, что состояние будет правильно установлено при инициализации класса?

2 ответов


то, что вы смотрите на ES7+ Property Initializers. Это делается так, потому что Facebook знает, что Javascript изменится в будущем. Они хотят быть в состоянии справиться с этими изменениями.

согласно Инициализаторам свойств facebook ES7+

подождите, назначение свойств кажется очень важным способом определение классов! Вы правы, однако мы разработали его таким образом потому что это идиома. Мы ожидаем более декларативный синтаксис свойство инициализация для поступления в будущую версию JavaScript....

вот Facebook ссылке Также больше информации здесь

также a Ссылка для предложения


Это просто синтаксический сахар, чтобы класс выглядел чище уже на babel:https://babeljs.io/docs/plugins/transform-class-properties/