Направете изобразяването по-бързо с помощта на React.memo

Ако вече сте чували за Stateless Function Component в React, може да забележите, че това е просто функция, която връща изглед, без логика, без състояние вътре в него. Ако дадем същите подпори в параметъра, той ще върне точно същия изглед.

Ето примера на функционален компонент без състояние (SFC)

interface Props {
    label: string;
}
const MyButton = (props: Props) => {
    return (
        <TouchableOpacity>
            <Text>{props.label}</Text>
        </TouchableOpacity>
    );
}

Тогава можем да използваме нашия бутон по следния начин:

<MyButton label="Press Me!!"/>

Всеки път, когато използваме бутона като примера с едни и същи подпори, навсякъде в приложението, приложението винаги ще създава нов изглед/екземпляр, който всъщност има абсолютно същия резултат. Представете си, че имаме един и същ бутон със същия етикет повече от 10, 20 или повече, в зависимост от това колко голямо е вашето приложение, то може да използва повече ресурс/процесор, отколкото си мислите.

Мемоизация на помощ

Мемоизацията е техника за програмиране, която се опитва да повиши производителността на функция чрез кеширане на предварително изчислените резултати. Всеки път, когато се извика мемоизирана функция, нейните параметри се използват за индексиране на кеша. Ако данните са налице, те могат да бъдат върнати, без да се изпълнява цялата функция. Ако обаче данните не са кеширани, тогава функцията се изпълнява и резултатът се добавя към кеша.

React.memo

React.memo е „компонент от по-висок ред“. Подобно е на React.PureComponent, но за функционални компоненти вместо класове.

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

Сега можем да направим нашия бутон като мемоизиран функционален компонент, като просто предадем нашия бутон на React.memo по следния начин:

const MemoizedMyButton = React.memo(MyButton)

И можем да използваме нашия нов бутон така:

<MemoizedMyButton label="Press Me!!"/>

справка