Я использую пользовательский интерфейс материала для реагирования для этого проекта.
У меня есть бэкэнд. Загрузите предметы в намеченную серию карточек с подпорками, которые содержат ряд кнопок. Упомянутый ряд кнопок является виновником замедления от того, что я быстро обнаружил. Это имеет смысл, потому что это длинная куча кода, и самым большим нарушителем замедления, похоже, является всплывающее окно диалога, на которое я предлагаю показать больше информации, которую моя исходная карта не предоставляет.
Вот упрощенная версия моей логики кодов c:
1. извлекать элементы базы данных в json. верните маленькую карточку со всеми реквизитами в сетке. Сильфон это возврат
return (
<Grid
container
direction="row"
justify="space-around"
alignItems="flex-start"
spacing={2}
>
{items.map(x => {
return (
<Grid item sm key={`key${x._id}`}>
<SmallCard
key={x._id}
// 18 other properties are assigned here and passed down.
/>
</Grid>
);
})}
</Grid>
);
}
export default Test;
2. в маленькой карточке - ряд кнопок, через которые я пропускаю все свои вещи json с реквизитом.
return (
<Card className={classes.card}>
<CardActionArea>
<Grid container spacing={3} style={{ position: "relative" }}>
<Grid item xs={6} className={classes.gridItems}>
<a href={props.GLink}>
<CardImg imageForCard={props.GPic} />
<p className={classes.PriceLeft}>{props.GPrice}</p>
<p className={classes.TitleLeft}>
{props.GTitle.substring(0, 30)}...
</p>
</a>
</Grid>
<Grid item xs={6} className={classes.gridItems}>
<a href={props.FriftLink}>
<CardImg imageForCard={props.FPic} />
<p className={classes.PriceRight}>{props.FPrice}</p>
<p className={classes.TitleRight}>
{props.FTitle.substring(0, 30)}...
</p>
</a>
</Grid>
</Grid>
</CardActionArea>
<ButtonRow
Key={props.Key}
// 18 PROPS HERE
/>
</Card>
3. в ряду кнопок находится кнопка дополнительной информации, которая передает все мои реквизиты в диалог
return (
<CardActions>
<ThemeProvider theme={themeOriginal}>
<ButtonGroup
variant="contained"
aria-label="text primary button group"
type="contained"
color="secondary"
size="small"
className={classes.root}
>
<Button/>
<Button/>
<Button/>
<ButtonForInfoCard/>
<InfoCard
key={props.key}
//18 PROPS HERE
/>
</ButtonGroup>
</ThemeProvider>
</CardActions>
);
4. Диалог содержит все реквизиты, которые отображают информацию только в меньших компонентах.
return (
<Dialog
open={props.open}
onClose={props.close}
scroll="body"
keepMounted
key={x._id}
>
<div className={classes.dialog}>
<TitleImgLft
GPrice={props.GPrice}
GPic={props.GPic}
GTitle={props.GTitle}
/>
<TitleImgRt
FPrice={props.FPrice}
FPic={props.FPic}
FTitle={props.FTitle}
/>
<Notes Notes={props.Notes} />
<br />
<VoteCount Likes={props.Likes} Dislikes={props.Dislikes} />
</div>
</Dialog>
);
У меня есть свои компоненты в разных папках для организации вещей, но я все еще не совсем уверен, что еще я могу сделать, чтобы ускорить процесс вверх. Я был бы рад показать код, если это поможет, но я предполагаю, что я делаю какую-то ладью ie mov ie, которую я не знаю, что я делаю.
Вот мой макет папки с файлами для справки.
Весь код здесь упрощен и не отображает мое состояние использования или хуки. Все мои компоненты основаны на функциях, так как меня учили использовать новейшие методы. Пользовательский интерфейс материала редактируется в таблицах стилей, а в некоторых случаях я использую переопределение стилей в пользу классов.