React Native: оптимизация списка предметов

Question

У меня есть список предметов, каждый из которых имеет тело и источник .В настоящее время это выглядит так:

const ListItem = (props) => {
    const {body, source} = props.context;

    return (
        <View style={styles.item}>>
            <View style={{backgroundColor: 'lightblue'}}>
                <Text style={styles.body}>{body}</Text>
            </View>
            <View style={{backgroundColor: 'lightyellow'}}>
                <Text style={styles.source}>{source}</Text>
            </View>
        </View>
    );
}

Это много вложений и контейнеров.Можно ли сделать это более оптимально?

Answer 1

Компонент Text принимает backgroundColor, поэтому вы можете отказаться от двух видов:

    <View style={styles.item}>
        <Text style={[styles.body, {backgroundColor: '...'}]}>{body}</Text>
        <Text style={[styles.source, {backgroundColor: '...'}]}>{source}</Text>
    </View>

Кроме того, я не знаю, из чего состоит style.item, но если вы хотите перейти на всеКстати, вы можете заменить другой контейнер View на React.Fragment.

Answer 2

Я собираюсь опубликовать свой комментарий в качестве ответа.

Предыдущий комментарий:

Я полагаю, это зависит от вашего дизайна, AFAIK, это нормально в React Native при условии, что вы 'Вы используете оптимизированный способ рендеринга вашего списка (например, используя FlatList или аналогичный)

Согласно вашему следующему комментарию, я не думаю, что это чудовищный вообще.

Вот альтернатива.Однако для удобства чтения я бы предпочел фрагмент, который вы разместили в своем вопросе.

const ListItem = props => {
  const items = [
    { key: 'body', backgroundColor: 'lightblue' },
    { key: 'source', backgroundColor: 'lightyellow' }
  ];
  return (
    <View style={styles.item}>
      {
        items.map(({ key, backgroundColor }) => 
          <View style={{ backgroundColor }}>
            <Text style={styles[key]}>
              { props[key] }
            </Text>
          </View>
        )
      }
    </View>
  )
}