Клас срещу функционални компоненти в React и суперсекретната трета опция

Предпочитам Chewables.

Когато започвам да нахлувам в React, въпросът, който най-често чувам, е „защо не бих използвал просто класен компонент за всичко? Защо изобщо да се занимаваме с функционални компоненти? “

Въпреки това, което някои функционални програми могат да кажат, това не е лош въпрос. В крайна сметка компонентите на класа ни дават толкова повече гъвкавост, много повече потенциал от обикновен, „тъп“ компонент. Със сигурност има няколко добри причини, поради които дори да се притесняваме с функционални (или „без гражданство“) компоненти, за да започнете.

Е, след като копаят, отговорът е ...

Субективно.

Така че нека преминем бързо двата типа и защо може би искате да използвате един над друг.

Функционални компоненти

Може би по-известни в общността на React като компоненти на „Без гражданство“, това е точно това, което пише на калай: функции без гражданство. Поради невъзможността да има свои собствени методи или да се позовава на това, всичко, което е състояние без компонент, може наистина да постигне, е визуализация чрез връщане на някои JSX (или React.createElement (), ако сте в старо училище).

Те нямат достъп до това, така че не могат да имат своето състояние, нито могат да имат методи по жизнения цикъл по същата причина. За тези, които трябва, ...

Компоненти на класа

Хлябът и маслото от рамката на React, класовите компоненти могат да направят всичко: състояние, методи на жизнения цикъл, редовни методи и рендеринг, всички обвити в подредено тяло на класа.

Neat! Сега, кое да използвам?

Илюзията за избор

Какъв притеснителен подзаглавие! След като прочетете какво е всяко от тях, вероятно си мислите „очевидно, използвайте компонент без състояние, ако трябва само да направите нещо на базата на реквизит!“ И ще бъдете прав! Обикновено точно това е причината да мислите да използвате компонент без състояние, но какво ще кажете за производителността? Memory?

Те зависят най-вече от размера на класа компонент. Имайте предвид, че и двата вида ще трябва да бъдат прехвърлени, което само по себе си ще се отрази на паметта. Очевидно по-подробният файл ще използва повече памет и ще повлияе на производителността повече от обикновен компонент без състояние, който, по силата си, може да бъде толкова голям, преди вероятно да преоцените, ако трябва да е само един или повече компонент.

И какво ще кажете за този страшен субтитър? Нека да попитаме самият експерт Реактив Дан Абрамов

Вземете това със зърно сол, тъй като в този момент е малко датирано и актуализациите по въпроса са трудни за изкопаване и беше казано от други разработчици от екипа на React, че са направени някои подобрения в скоростта на функционалните компоненти. Говори се също от доста време за оптимизиране на компоненти без гражданство, така че те да се окажат по-полезни по линията.

След някакъв собствен тест за сравнение, изглежда, че функционалните компоненти имат потенциала да се движат средно с около 20% по-бързо, което не може да се разклати.

И все пак ... има друг начин ...

Спойлер за предупреждение: истинският е JavaScript

Дължа това, откровено умопомрачително, наблюдение на средния член на Филип Лехо, 45%, по-бързо реагиращи функционални компоненти, сега. Причината, поради която функционалните компоненти не са много по-бързи от компонентите на класа, е, че те продължават да разширяват React.Component и по този начин все още се зареждат в цялата логика на класния компонент!

Така че за да ускорим тези тъпи компоненти, трябва да заобиколим ненужния багаж, който ни предоставя React.Component, и ако трябва да се откажем от React, отговорът е добър ol ’JS.

Boom.

Знам. Толкова е просто, но и толкова красиво. Плюс това, в моите тестове за сравнение, той победи нормален компонент от клас с 51%. 51!

Нека да разгледаме транспилацията и да видим защо това е така.

Пряко функционално обаждане срещу компонентно мигновение

В нашата нормална компонентна инстанция сме вложили .createElement () обаждания, за да изградим нашето DOM дърво, но с директни обаждания на функции можем просто да изпуснем връщащата се стойност на нашата функция.

И така, каква е истината?

(Съжалявам, не съжалявам)

В края на деня какви са поеманията?

  1. Класовете са по-мощни и гъвкави,
  2. Без гражданство са малко по-бързи (и изисква по-малко писане!), С някои обещания на вятъра за оптимизация,
  3. На разположение ви е (донякъде непроверено) скоростно хакване, ако трябва да изтръгнете цялата производителност, която можете да постигнете,
  4. В края на деня направете всичко, което е най-малкият минимум за Компонента. Вероятно е правилният избор