как оптимизировать(закешировать неизменяемые данные)

Question

сам компонент

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>
  )
}

Answer 1

Используйте 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)

БЛОГ НА HUSL

как оптимизировать(закешировать неизменяемые данные)

Ответы (1 шт):