Если вы когда -либо написали класс компонента в React, у вас, вероятно, есть конструктор, очень похожий на это:
import React, { Component } from "react";
export class Incrementor extends Component {
constructor() {
super();
this.state = {
count: 0,
};
this.increment = this.increment.bind(this);
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
);
}
}
Это схема, используемой в React Docs, и, кажется, является наиболее распространенным подходом, который я видел в дикой природе. Если вы что -то похожи на меня, вы забываете связать обработчик событий, пока не получите вездесущий Это не определен; Не могу получить доступ к своему свойству «SetState» ошибка.
Пользователи TypeScript, вероятно, смотрят на это и задаются вопросом, почему нужны эта песня и танец. Самый идиоматический типовой способ, вероятно, это:
import * as React from "react";
interface State {
count: number;
}
export class Incrementor extends React.Component<{}, State> {
state = { count: 0 };
increment = () => this.setState({ count: this.state.count + 1 });
render() {
return (
);
}
}
Вместо инициализации состояния в конструкторе это свойство класса. Приращение Метод был изменен на функцию стрелки. Это означает, что нет необходимости связывать его: он уже имеет доступ к это из компонента. Мы можем изменить render () Метод для функции стрелки тоже. Это ничего не приобретает с точки зрения масштаба, но для меня выглядит намного яснее:
import * as React from "react";
interface State {
count: number;
}
export class Incrementor extends React.Component<{}, State> {
state = { count: 0 };
increment = () => this.setState({ count: this.state.count + 1 });
render = () => (
);
}
Попытайся
Теперь многие люди, читающие это, вероятно, думают: «Ну, дух: мы смогли сделать этот JavaScript для веков», что правда, но только если у вас есть Плагин правого вабеля . Это не стандартный Ecmascript и не включен по умолчанию. Однако он используется по умолчанию в приложении Create-React-A, поэтому довольно много людей думали, что это стандартное. Я знаю, что сделал. Если у вас включен плагин, вы можете написать следующее, что практически идентично TypeScript:
import React from "react";
export class Incrementor extends React.Component {
state = { count: 0 };
increment = () => this.setState({ count: this.state.count + 1 });
render = () => (
);
}
Попытайся
Гораздо более аккуратно, верно?
Функции поля класса не являются решением всего. Для начала вы не можете переопределить их на подклассах и использовать их для переопределения методов суперкласса. По этой причине вы не можете использовать их для методов жизненного цикла. Есть также потенциальные проблемы с производительностью, если вы создаете множество копий компонента. В то время как метод класса создается один раз на прототипе, поля классов создаются на каждом объекте: каждый компонент будет иметь свою собственную копию каждой функции. Однако это может быть проблемой, только если вы создаете сотни экземпляров.
Почему сейчас?
Плагин Class-Properties был доступен уже пару лет, так почему я пишу этот пост сейчас? Ну, пара вещей изменилась в последнее время. Классовое предложение пробирался через процесс TC39 ECMascript в течение многих лет, и сейчас находится на этапе 3, который является последним этапом перед одобрением. Это было довольно спорным предложением, и он был на 3 этапе с июля 2017 года. Это во многом связано с разногласиям по поводу синтаксиса и реализации частного поля. Однако кажется, что процесс стандартизации почти существует, и в прошлом месяце произошло важное развитие: поддержка браузера приземлилась. Chrome 72 (и V8 V7.2) будет Включить общественные поля по умолчанию , с частными полями, доступными за флагом. Это будет выпущено 29 января 2019 года. Между тем, поддержка должна быть скоро приземлиться в Firefox и Сафари Анкет Самым последним обновлением TC39 было то, что они стремятся перейти на 4 -й этап (закончен) Как только есть две реализации Анкет Похоже, это будет неизбежный Анкет
Конечно, мы все знаем, что крючки – это путь вперед, но Facebook дал понять, что компоненты классов никуда не денутся. Я хотел бы сделать просьбу о том, что сейчас самое время двигаться, чтобы сделать решающий шаг и перейти на поля классов. Изгоньте конструктор (большую часть времени)!
Оригинал: “https://dev.to/ascorbic/class-fields-are-coming-heres-what-that-means-for-react–3a87”