Есть ли существенная разница в синтаксисе определения состояния в React Component?
Есть ли какая-либо разница (кроме синтаксиса) в определении state в компоненте React (см. Примеры ниже, в классе и в конструкторе)?
Разница в распределении памяти JS, управлении памятью, производительности JS, утечках памяти, сборке мусора и других проблемах?
Я обычно определяю state в constructor. Но просматривая код других парней, я видел, что они определяют состояние в области видимости класса.
class Button extends React.Component {
// this style vs. ...
state = {
color: 'red'
}
constructor(props) {
super(props)
// ... vs. this style
this.state = {
color: 'red'
}
}
}
Синтаксический сахар @Keith - это скрытый фрагмент кода, который выполняет некоторую операцию, чтобы сделать синтаксический сахар возможным. Это может быть более или менее затратная операция.
Нет, это точно так же, синтаксический сахар - это просто так. Объявления области видимости класса еще даже не являются стандартными. Так что прироста производительности не будет.
пс. ты тоже имел ввиду -> state = { color: 'red' }github.com/tc39/proposal-class-fields
@Keith Ага, конечно. Синтаксическая ошибка
Это на этапе 3, поэтому некоторые браузеры могут вскоре внедрить его. Так что, возможно, вы могли бы воскресить эту ветку в будущем .. :) Я чувствую, что даже когда браузеры реализованы изначально, я сомневаюсь, что между ними будет большая разница в производительности.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
это тоже своего рода синтаксис PREACT ...
Инициализация свойств экземпляра вне конструктора - это предлагаемый синтаксис для следующей версии EcmaScript. Это часть официальное предложение этапа 3.
Согласно этому предложению следующий фрагмент:
class MyClass {
constructor() {
console.info("Hello from constructor!");
this.x = 1;
}
}
Может быть сокращено до:
class MyClass {
x = 1;
constructor() {
console.info("Hello from constructor!");
}
}
Если свойство x объявлено и инициализировано с тем же синтаксисом, что и свойство state в вашем примере.
ES7 не существует. В настоящее время он называется ES.Next.
@estus Удалена ссылка на номер версии.
Это просто синтаксический сахар, оба дадут вам один и тот же объект подчеркивания.