В основном я следую этому правилу:
Создание компонента, который отображает элементы
// in some file
export const RenderItems = ({data}) => {
return data && data.map((d, i) => <span key={d.id}>{d.name}</span>) || null
}
Крюк RenderItems
import { RenderItems } from 'some-file'
class App extends Component {
render() {
// you may also define data here instead of getting data from props
const { data } = this.props
return (
<div>
<RenderItems data={data} />
</div>
)
}
}
Прикрепить данные в компоненте
const data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}]
<App data={data} />
Следование этому правилу не повлияет на производительность даже с вашим вторым примером кода, т.е. вставка элементов в массив и рендеринг элементов. Потому что вы не работаете напрямую с обработчиком рендера. Всегда заботьтесь о том, чтобы хук рендеринга не реализовывал внутри себя никакой логики.
Кроме того, я бы не стал создавать id только для использования ключа:
const data = [{"name": "Hi"}, {"name": "Hello"}]
//... and when using index as key
.map((d, i) => <span key={'item-'+i}>
// or,
.map((d, i) => <span key={'item-'+i+'-'+d.name}>
См. в этом посте , почему я придерживаюсь этого синтаксиса при использовании индекса в качестве ключа.
Обновление:
Если вы хотите избежать использования ненужных HTML-тегов, вы можете использовать React.Fragment
export const RenderItems = ({data}) => {
return data &&
data.map(
(d, i) => <React.Fragment key={d.id}>{d.name}</React.Fragment>
) || null
}
// and when rendering, you just return the component
return <RenderItems data={data} />
Примечание:
- Вы можете использовать
<></> в качестве псевдонима для <React.Fragment></React.Fragment>, только если у вас нет дополнительных свойств. Поскольку мы используем ключевое свойство для него, а не используем его.
- Взгляните на this , чтобы сделать поддержку краткой записи
React.Fragment.
Пример использования <></>:
<>{d.name}</>
Будет отображено значение d.name в html без тега. Это считается лучшим, когда мы специально трансформируем наш существующий дизайн, чтобы реагировать на приложения. Или могут быть другие случаи. Например, мы собираемся отобразить список определений:
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dd>
</dl>
И мы не хотим прикреплять ненужный HTML-тег, тогда использование Fragment сделает нашу жизнь проще:
* * Пример одна тысяча пятьдесят пять: * * одна тысяча пятьдесят-шесть
<>
<dt>{d.term}</dt>
<dd>{d.definition}</dd>
</>
Наиболее важным случаем будет рендеринг элемента td в tr (компонент TR). Если мы этого не сделаем, то мы нарушаем правило HTML. Компонент не будет отображен должным образом. В ответ вы получите ошибку.
Update2:
Кроме того, если у вас есть длинный список реквизитов , как показано ниже:
const {
items,
id,
imdbID,
title,
poster,
getMovieInfo,
addToFavorites,
isOpen,
toggleModal,
closeModal,
modalData,
} = props
Вы можете рассмотреть вопрос о разрушении, как:
const { items, ...other } = props
// and in your component you can use like:
<div modalData={other.modalData}>
Но лично я предпочитаю использовать первый пример кода. Это потому, что при разработке мне не нужно оглядываться на другой компонент или искать консоль каждый раз. В данном примере есть ключ типа modalData={}, поэтому мы легко поддерживаем modalData={other.modalData}. Но что, если необходимо кодировать как <div>{modalData}</div>? Тогда вы также можете согласиться с моими предпочтениями.