主页 / 问题 / 1274870
Accepted
Armen
Asked:2022-04-26 09:22:47 +0000 UTC2022-04-26 09:22:47 +0000 UTC

如何优化（缓存不可变数据）

  • 772

组件本身

import React from 'react';
import styles from './ImgCreator.module.scss';

interface IImgProps{
    imgArr:Array<string>,
}

const getData = (data:Array<string>) => {
        let arr = data.map(e => {
            //каждый раз пробежатся по data нет смысла данные не меняются
            console.log(`maping`);
            return (
                <React.Fragment key={e}>
                    {/* <img className={styles.img} src={e} alt={e}/> */}
                    <span style={{color:'red'}}>{Math.random()}</span>
                </React.Fragment>
            )
        })
        return arr
    }

export const ImgCreator:React.FC<IImgProps> =({imgArr}) => {
    //тут как то нужно сохранить arr чтобы при следующем рендере getData не сработал
    const arr = getData(imgArr)
    return (
        <div className={styles.root}>
            {arr}
        </div>
    )
}

怎么称呼

export const MyTabs = () => {
    const imgArr = [
      pictures.rect5_1,
      pictures.rect5_2,
      pictures.rect5_3,
      pictures.rect5_4,
      pictures.rect5_5,
      pictures.rect5_6,
    ]
  return (
    <div className={styles.root}>
         {imgArr.map((e) => {
           return <TabPanel key={e.replace(/\s/g,'')}>
           <ImgCreator imgArr={imgArr}/>
         </TabPanel>
         })}
    </div>
  )
}
reactjs

1 个回答

  1. Best Answer

    用于useState更改变量并useEffect跟踪道具更改，并且仅在更改时运行。

    import React, { useEffect, useState } from "react";
import styles from "./ImgCreator.module.scss";

interface IImgProps {
  imgArr: Array<string>;
}

const getData = (data: Array<string>) => {
  let arr = data.map((e) => {
    return (
      <React.Fragment key={e}>
        {/* <img className={styles.img} src={e} alt={e}/> */}
        <span style={{ color: "red" }}>{Math.random()}</span>
      </React.Fragment>
    );
  });
  return arr;
};

export const ImgCreator: React.FC<IImgProps> = ({ imgArr }) => {
  const [arr, setArr] = useState([]);

  useEffect(() => {
    setArr(getData(imgArr));
  }, [imgArr]);

  return <div className={styles.root}>{arr}</div>;
};

    您还可以使用React.memo()使组件仅在道具更改时呈现。

    const ImgCreator: React.FC<IImgProps> = ({ imgArr }) => {
   ...
}

export default React.memo(ImgCreator)
    • 1

相关问题