我想防止重新渲染子组件

Question

我在我的父级中使用三个子组件，根据我在 Accordion 中单击时显示在下我有很多这样的子组件，我的数据没有改变我已经存储在一些 state 之前进入这个手风琴部分

import React from 'react'
import {
    Box,
    makeStyles,
    Typography,
    Paper,
    Grid,
    Card,
    CardContent,
  } from "@material-ui/core";

function childComponent({data, title, classes}) {
    console.log("child rerender dataChnage")
    const Memodata = React.useMemo(() => {
        return data
     },[data]);
    return (
        <>
        <Box mt={2}>
           <Typography variant="subtitle2" noWrap={true}>
             <Box fontWeight="fontWeightBold">{title}</Box>
           </Typography>
         </Box>
         {Memodata?.map((row, rowIndex) => {
           return (
             <>
             {Memodata?.length !== 0  ? (
               <Card className={classes.cardSpace} variant="outlined">
                 <CardContent>
                   <Grid xs={12} item container spacing={2}>
                     <Grid item xs={12} sm={3}>
                       <Typography  variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           name :
                         </Box>
                         {row.SRN}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography  variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                            ID :
                         </Box>
                         {row.CHARGE_ID ? row.CHARGE_ID : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={6}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                            Holder :
                         </Box>
                         {row.CHARGE_HOLDER ? row.CHARGE_HOLDER : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Date Create :
                         </Box>
                         {row.DATE_CREATE ? row.DATE_CREATE : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Date Modified :
                         </Box>
                         {row.DATE_MODIFIED ? row.DATE_MODIFIED : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Date Satisfied :
                         </Box>
                         {row.DATE_SATISFIED ? row.DATE_SATISFIED : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Amount :
                         </Box>
                         {row.AMOUNT ? row.AMOUNT : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Address :
                         </Box>
                         {row.ADDRESS ? row.ADDRESS : "N/A"}
                       </Typography>
                     </Grid>
                   </Grid>
                 </CardContent>
               </Card>
               ) : (
                 <Typography variant="subtitle2">No Data Available.</Typography>
               )}
             </>
           );
         })}
       </>
    )
}

export default React.memo(childComponent);

在子组件中传递数据

{MemoUserHistorySummary?.masterData?.map((row, i) => {
            return (
              <Accordion
                expanded={expanded === i}
                onChange={handleChange(i)}
                elevation={0}
                className={classes.bgColor}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="panel1bh-content"
                  id="panel1bh-header"
                >
                  <Grid container direction="row">
                    <Grid item xs={12} md={6}>
                      <Grid item xs={12}>
                        <Box display="flex">
                          <Grid item xs={8} sm={4} md={3}>
                            <Box overflow="hidden" width="100%">
                              <Typography component={"div"} variant="subtitle">
                                <Box
                                  fontWeight="fontWeightBold"
                                  overflow="hidden"
                                  whiteSpace="nowrap"
                                  textOverflow="ellipsis"
                                >
                                  Name :
                                </Box>
                              </Typography>
                            </Box>
                          </Grid>
                          <Grid item xs={9} sm={8} md={9}>
                            <Typography component={"div"} variant="subtitle">
                              {row.NAME}
                            </Typography>
                          </Grid>
                        </Box>
                        <Grid item xs={12}>
                          <Typography variant="subtitle">
                            <Box display="flex" flexWrap="wrap">
                              <Box mr={1} fontWeight="fontWeightBold">
                                ID :
                              </Box>
                              {row.ID}
                            </Box>
                          </Typography>
                        </Grid>
                      </Grid>
                    </Grid>
                    <Grid container item xs={12} md={6}>
                      <Grid item xs={2}>
                        <Box overflow="hidden" width="100%">
                          <Typography component={"div"} variant="subtitle">
                            <Box
                              fontWeight="fontWeightBold"
                              overflow="hidden"
                              whiteSpace="nowrap"
                              textOverflow="ellipsis"
                            >
                              Address :
                            </Box>
                          </Typography>
                        </Box>
                      </Grid>
                      <Grid item xs={10}>
                        <Box display="flex">
                          <Typography
                            component={"div"}
                            variant="subtitle"
                            title={row.REGISTERED_OFFICE_ADDRESS}
                          >
                            {row.REGISTERED_OFFICE_ADDRESS.slice(0, 110)}
                          </Typography>
                        </Box>
                      </Grid>
                    </Grid>
                  </Grid>
                </AccordionSummary>
                <AccordionDetails>
                  <Grid item xs={12}>
                    <DetailsCards
                      companyName="Name"
                      row={row}
                      mainDetailData={corporateCells}
                      show={show}
                      setShow={setShow}
                    />
                     <DownloadsChargesCard
                      data={MemoUserHistorySummary?.charges}
                      title={"Charges Registered"}
                      cells={chargesCells}
                      classes={classes}
                    />

                    <DownloadDiractorCard
                      data={MemoUserHistorySummary?.directors_history}
                      title={"Directors List"}
                      cells={signatoriesCells}
                      classes={classes}
                    />
                  </Grid>
                </AccordionDetails>
              </Accordion>
            );
          })}

Answer 1

你基本上需要在子组件上实现shouldComponentUpdate()并让它return false当 state 或导致父手风琴展开的道具是nextProps或nextState中的唯一值（取决于你如何控制你的手风琴，我不能'从您的代码示例中可以看出）。