Последно потвърдено на 16 април 2020 г. Първоначално публикувано на 11 септември 2017 г.

събития

Въпреки че този урок има съдържание, което смятаме, че е от голяма полза за нашата общност, все още не сме го тествали или редактирали, за да гарантираме, че имате опит за обучение без грешки. Той е в нашия списък и ние работим по него! Можете да ни помогнете, като използвате бутона „Съобщете за проблем“ в долната част на урока.

* “Синтаксис на инициализатора на имоти” * звучи по-изискано, отколкото е в действителност. В този урок с размер на хапка вижте как този алтернативен начин за писане на манипулатори на събития ще помогне да се премахне шаблонния шаблон във вашия конструктор и също така да се защити срещу несериозно използване на паметта във вашите рендери.

В документите на Facebook ще видите обработката на събития, направена по следния начин:

Класовете ES6 няма автоматично да дадат този обхват на handleSmthng и тъй като обикновено ще искате да извикате this.setState или може би да извикате друг метод в компонента, „официалното“ споразумение е да обвързва всички обработчици на събития през цялото време в конструктора . Това работи, но бързо може да се почувства като шаблонния код.

Този модел изглежда става все по-популярен в онлайн уроците на React. Той ще предаде този контекст на handleSmthng и избягва шаблонния код в конструктора. По дяволите, в този компонент няма състояние, така че дори не се нуждаете от конструктор! Мисля, че мотивацията за този подход е правилна ... но има леки разходи за изпълнение.

Използването на функция със стрелка винаги ще създаде нова препратка в JavaScript, което от своя страна увеличава използването на паметта за вашите приложения. Докато паметта е евтина в JavaScript, рендерирането е скъпо в React. Когато предавате функции на стрелките на дъщерни компоненти, вашият подчинен компонент ще се визуализира безразборно, тъй като (доколкото това се отнася) тази функция със стрелка е нова информация. Това може да означава разликата между получаването на 60fps или 50fps за големи приложения на React.

"... Ако обаче този обратен извикване бъде предаден като поддръжка за по-ниски компоненти, тези компоненти може да направят допълнително повторно изобразяване." React Docs

Две обвързва едно затваряне

Има много по-изчистен начин за писане на манипулатори на събития, който 1) избягва образец и 2) не причинява допълнителни рендери: синтаксис на инициализатора на свойства! Това е изискано име, но идеята е наистина проста ... просто използвайте функциите със стрелки, за да дефинирате вашите манипулатори на събития. Като този:

Дефинирахте два манипулатора и изглежда наистина хубаво. Няма шаблон. Лесен за четене. Лесно е да се префакторира ... ако искате да предадете аргументи:

Бум! Можете да предавате аргументи, без да използвате bind във вашите методи за рендиране или вашия конструктор! Всичко изглежда наистина пикантно.

Ако не сте свикнали да виждате функции със стрелки, това вероятно изглежда странно. Не забравяйте с ES6, че синтаксисът на тлъстата стрелка позволява да се пропуснат фигурни скоби за едноредови изявления ... той по подразбиране ще върне кои са на този ред! Ето как Babel би транслирал handleRemove:

За да конфигурирате Babel да използва синтаксиса на Initializer Property, уверете се, че сте инсталирали приставката “transform-class-properties” или активирайте етап-2. Ако използвате приложението „създай-реагирай“ ... то вече е налице!

Има правило ESLint, което ще ви каже да не използвате функциите за обвързване или стрелки при изобразяване

Предимства от използването на синтаксиса на инициализатора на имоти

Най-доброто ми предположение е, че Facebook не е „официално“ одобрил този модел в своята документация, защото ES6 на етап 2 все още не е финализиран, така че Property Initializers все още се считат за нестандартни. Обаче генераторът на приложения за създаване-реакция вече позволява етап-2, така че ... много вероятно е Инициаторите на имоти да станат де факто за дефиниране на манипулатори на събития в близко бъдеще.

След като се почувствате комфортно с Property Initializers и започнете да ги използвате за дефиниране на методи за обработка, ще спечелите две забележителни предимства:

  • По-малко шаблон за писане Не е необходимо да пишете оператори за обвързване в конструктора е доста сладко. Сега просто дефинирате метода - и това е ✨. Ако трябва да предадете аргументи, просто увийте с едно затваряне и не забравяйте да извикате тази функция на манипулатор в рендериране. Като допълнително предимство, ако имате нужда от рефакториране на вашия манипулатор на събития някъде другаде, имате само едно място за изрязване.
  • По-малко използване на паметта Използването на функции със стрелки в рендирането е лоша идея, защото „по дизайн“ рендери се появяват при голям обем по време на жизнения цикъл на компонента; разпределяне на нов указател за всяка функция стрелка. Въздържането от функциите на стрелки в рендерирането ще гарантира, че поддържате използването на паметта на вашия компонент на диета.

Вижте този CodePen, за да видите синтаксиса на свойството Initializer в действие