Когда мы создаем приложение с помощью React-Native, то сперва спрашиваем себя – как мы будем организовывать стилизацию своих компонентов. Сейчас существует множество различных библиотек. И почти все из них утверждают, что у них лучший перфоманс. Но давайте рассмотрим только три варианта:

StyleSheet, который React-Native предоставляет “из коробки”.
styled-components, технология, которая пришла к нам из веба.
Относительно новый способ – UniStyles.

Меня зовут Алексей Цуцоев, сейчас я Frontend TL в KODE. Эту статью я писал, когда только устроился в компанию и мне нужно было систематизировать навыки, передать свой опыт стажерам и просто высказать свои мысли относительно styled. Вижу, что до сих пор многие начинающие разработчики сталкиваются с такой же проблемой, как я в прошлом, поэтому статья вышла из нашей внутренней конфы в мир.

В этой статье расскажу, какие преимущества и недостатки у каждой из библиотек. Публикация будет полезная тем, кто хочет освежить свои знания в React-Native или только начал их изучение этого стека.

StyleSheet

C ним все просто: мы имеем знакомый каждому react-native разработчику css-подобный синтаксис. Что-то похожее на:

const styles = StyleSheet.create({

container: {

flex: 1,

paddingVertical: 20,

paddingHorizontal: 20,

},

item: {

height: 20,

width: '100%',

borderRadius: 10,

marginBottom: 10,

},

});

Все достаточно просто и удобно. Данный метод поддерживает типизацию, и вы всегда можете видеть, какие объекты стилей создали.

Также доступно соединение стилей с помощью массива:

style={[styles.item, condition && styles.extraItemStyles]}

Но с этим подходом есть проблема: использование темы.

Предположим, мы хотим добавить пользователю возможность выбора темы, или чтобы она устанавливалась по умолчанию в зависимости от выбранной на устройстве. Тут у нас возникают проблемы: если мы написали backgroundColor: ‘white’, то мы уже “покрасили” нашу View в белый цвет, и меняться в зависимости от цветовой схемы телефона он не будет.

Однако это легко решается: мы можем подготовить тему самостоятельно. Для этого нужно совершить следующие действия:

Необходимо завести хранение выбранной темы в MMKV или async-storage. Там будет уместно хранить enam из трех полей: os, dark, light

В случае с MMKV у нас получиться что-то похожее на:

/**

* Possible variants for theme

*/

export type TAppearanceVariant = 'dark' | 'light' | 'system';

export type TAppearanceStorage = {

get: () => TAppearanceVariant | undefined;

set: (newValue: TAppearanceVariant) => void;

reset: () => void;

};

const storage = new MMKV({

id: STORAGE_ID,

});

export const appearanceStorage: TAppearanceStorage = {

get: () => {

const result = storage.getString(STORAGE_KEY) as

| TAppearanceVariant

| undefined;

if (!isValueAppearanceVariant(result)) {

return;

}

return result;

},

set: (newValue: TAppearanceVariant) => storage.set(STORAGE_KEY, newValue),

reset: () => {

Важно: не стоит копировать код из примеров выше, так как он был написал схематично и исключительно для примеров. В жизни все будет немного сложнее. Придется еще обновлять цвета для навигационного бара на Android, также будут нюансы с навигацией и, возможно, что-то еще, в зависимости от контекста вашего проекта.

Ну, и наконец, использование наших конструкций. Здесь потребуется обернуть вызов StyleSheet.create в функцию и добавить в аргументы тему:

export const getStyles = (theme: Theme) => {

return StyleSheet.create({

container: {

flex: 1,

backgroundColor: theme.background,

paddingVertical: 20,

paddingHorizontal: 20,

},

item: {

height: 20,

width: '100%',

backgroundColor: theme.primary,

borderRadius: 10,

marginBottom: 10,

},

});

};

Использование:

const appear = useAppearanceController({ storage });

const theme = useTheme();

const styles = useMemo(() => getStyles(theme), [theme]);

Повторюсь, все это схематичный код, который написан для статьи, не стоит использовать это, как рабочее решение для прода.Но вы можете взять эту схему для своего решения и расширить его. Допустим, добавить спейсинги в объект темы, чтобы была возможность менять их в зависимости от нее. Или же добавить скейлинг, чтобы наше приложение одинаков�� хорошо смотрелось на разных девайсах.

Но с этой системой тоже есть проблема: это кастомная система, вам самостоятельно придется поддерживать ее и, если в команду придет новый разработчик, объяснять что и как работает. Возможно, документирование кода поможет, но не до конца. И многие разработчики сказали бы: “и зачем нам это писать, когда есть готовые решения?”. И будут правы.

UniStyles

Тут будет все коротко. UniStyles – новый способ типизации для вашего React-Native проекта. API для работы очень похож на дефолтный StyleSheet.Вы даже можете начать просто с конфигурации библиотеки и замены импортов с

```
import { StyleSheet } from ‘react-native’

``
На
`
import { StyleSheet } from ‘react-native-unistyles’``

И все, вы подключили UniStyles к своему проекту. Но советую все таки ознакомиться с документацией.Библиотека дает одно важное преимущество: она позволяет упорядочить работу с темой. То есть весомую часть кода из предыдущей главы вы можете просто удалить и оставить только storage для хранения выбранной темы и ваши проект-специфичные настройки.Но UniStyles относительно новый инструмент.Возможно стоит обратиться к чему-то проверенному.Поэтому рассмотрим следующий вариант: styled-components

styled-components

Эта библиотека знакома многим web-разработчикам, думаю, в представлении она не нуждается. У нее есть адаптация под react-native, есть уже “из коробки” управление темой, и выглядит это примерно так:

const Container = styled.View`

background-color: ${({ theme }) => theme.palette.background.primary};

border-top-left-radius: 16px;

border-top-right-radius: 16px;

height: 100%;

`;

И, на первый взгляд, использование styled-components выглядит идеальным решением: есть возможность использования темы сразу, ваши новые члены команды, скорее всего, уже знакомы с этой библиотекой, а также есть возможность добавления аргументов через дженерик-параметры. Если в вашей компании нет деления на react и react-native, и web-разработчик может попасть на мобильный проект, то ему это так же будет удобно, – ведь он уже знаком с технологией. Кроме того, в верстке <Container> выглядит приятнее чем <View style={styles.container}>.

Но так же мы знаем, что styled-components – это достаточно тяжелая библиотека, и много у кого есть к ней вопросы по производительности. Кроме того, в react-native у нас нет css-class, и мы не можем для оптимизации использовать классы внутри одного компонента. Нам придется создав��ть стилизованный объект под каждый наш компонент.

И в этот момент встает вопрос о производительности. Я засетапил простой проект, куда завез все три библиотеки и провел небольшие тесты скорости монтирования элементов.

Производительность

Я решил проверить насколько сильно влияет использование styled на производительность в react-native. Для этого я взял три тестовых экрана для каждой из библиотек. Все экраны просто рисовали 500 красных прямоугольников.

Чтобы избежать оптимизаций FlatList я использовал обычный ScrollView. Все замеры я проводил с перезапуском приложения, чтобы исключить влияние кэша, и по 5 раз, чтобы исключить другие погрешности.

Для замера перфоманса я использовал два инструмента:

@shopify/react-native-performance.
Поскольку @shopify/react-native-performance уже в архиве я добавил замеры через кастомное решение:
const getNow = () => {
if (typeof performance !== 'undefined') {
const perfResult = performance.now();
console.log('performance.now()', perfResult);
return perfResult;
}
const dateResult = Date.now();
console.log('Date.now()', dateResult);
return dateResult;
};
const nextFrame = () =>
new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
const measureAsync = async (fn: () => void) => {
const start = getNow();
fn();
await nextFrame();
return getNow() - start;
};

Замеры велись в миллисекундах.

Забегая вперед – разница в замерах была минимальная, так что дальше будут цифры только через код выше (просто потому что я его добавил позже).

Ниже средние результаты (5 замеров) для рендера массива из 500 элементов для ios:

StyleSheet – (123+118+120+120+121) / 5 = 120,4
UniStyles – (128+131+128+119+122) / 5 = 125,6
styled – (137+125+127+136+131) / 5 = 131,2

Вы видите, что разница невелика. Но я хочу отметить, что тест достаточно синтетический с малым объемом стилизации. И на больших экранах с большим количеством стилизованных элементов разница будет больше.

Если мы возьмем StyleSheet за 100%, то выйдет

StyleSheet – 100%
UniStyles – 104.31%
styled – 108.97%

Очевидно, что styled требуется больше времени на рендер. Styled-components прост�� не может работать быстрее, чем объект StyleSheet. Хотя бы потому что “под капотом” styled-components для React-Native использует библиотеку css-to-react-native, которая, насколько я могу судить по исходному коду, приводит наш css к тому же объекту StyleSheet. Поэтому, чем больше у вас стилей на элементе – тем больше будет затрачиваться времени на парсинг.

Выводы

Не бывает идеальных технологий. На мой взгляд следует придерживаться примерно таких правил:
Если у вас:

объемная тема, которую трудно менеджерить
часто меняются члены команды и/или многие из них приходят с web
ограничено время
возможно, у вас уже есть мобильная верстка для web, и вы бы хотели перенести ее в мобильное приложение.

То для вас, наверно, лучше подойдет styled-components.

Если у вас есть потребность в упрощенном менеджменте темы, но вы не готовы мириться с просадкой производительности, то стоит посмотреть в сторону UniStyles, библиотека упростит работу с темой без серьезных просадок в производительности.

Но если вы беспокоитесь о производительности, и у вас есть время на написание своей темы, то можно остановиться на решении “из коробки” React-Native.

В KODE мы долгое время использовали styled-components как стандартное решение —. для упрощения переходов разработчиков с web на react-native и обратно, из-за того, что у нас Frontend отдел объединяет web и mobile.Но в данный момент styled-components потихоньку устаревает и все чаще web-проекты стартуют с другими библиотеками для стилизации. Поэтому мы решили освежить и стандарт для React-native – переехали на UniStyles.

Выбираем технологию для стилей в React-Native