Плохая практика генерировать новую таблицу стилей каждый рендер? - PullRequest
Новая
       9

Плохая практика генерировать новую таблицу стилей каждый рендер?

0 голосов
/ 24 апреля 2018

Каждый пример документации, который я читал о создании таблицы стилей для компонента, делал это вне render () (даже как обычная переменная вне класса компонента). Это означает, что у меня нет контроля над реквизитом или изменениями состояния, которые могут манипулировать стилем указанного компонента. Поэтому я вызываю getStyles() функцию внутри метода render (), которая создает (новую) таблицу стилей для каждого рендера. Для меня это звучит дорого с точки зрения производительности, но это делает работу. Однако мне интересно, есть ли лучший способ сделать это?

Заранее спасибо!

1 Ответ

0 голосов
/ 24 апреля 2018

Да! В соответствии с таблицами стилей не самая лучшая идея создавать таблицы стилей во время каждого рендеринга из-за производительности и читабельности кода.

Есть лучший способ сделать это, используя нотации массива , что в основном означает, что вы можете передать массив объектов стиля

например, если бы у меня был компонент, у которого был задан цвет фона и цвет текста в объекте стилей, например: 

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class SomeComponent extends Component{
   render(){
       return(
         <View style={styles.root}>
             <Text>{'Hi Everybody!'}</Text>
         </View>
       );
   }
}

const styles = StyleSheet.create({
   root: {
       backgroundColor: '#000000',
       height: 400, 
       width: 300,
       color: 'white'
   }
});

Вы можете настроить цвет фона (или любой другой стиль) следующим образом: 

 <View style={[styles.root, {backgroundColor: "yellow"}]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

В вашем случае вы можете передать значение реквизита следующим образом: 

 <View style={[styles.root, this.props.style]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

или переменная из объекта состояния, например, так: 

 <View style={[styles.root, this.state.style]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

Более поздние значения в массиве будут иметь приоритет, поэтому, если я добавлю еще один объект стиля, имеющий атрибут backgroundColor, будет применен последний backgroundColor; Например, если я сделал это: 

 <View style={[styles.root, {backgroundColor: "yellow"}, {backgroundColor: "green"}]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

цвет фона будет зеленым. Теперь вы можете написать свой код таким образом, чтобы стили, созданные с помощью StyleSheet.create({}), содержали стандартные шаблоны, которые были постоянными и применялись к любой настройке, или только к стилям по умолчанию.

Надеюсь, это поможет.

...