React? ???? ??? ?? ???? ???, ???? "??"? ??? ?? ??? ???? ?? ?? ??? ? ???? ??? ??? ??? ? ????. "??"? ???? ?? ??? ?? ? ? ????. ?? ??, ????? ????? ????? ?? ???? ? ????? ??? ???? ???? ?? ?? ???? ???? ?? ????? ??? ?? ? ? ????. ?? ?? ???? ??? ? ?? ?? ??? "??"?? ??????. ??? ????? ?? ?? ???? ????, ?? ??? ??? ?? ????. ??? ??? ??? ????? ??? ??? ???? ??? ?? ?? ?? ? ?? ?????. ?? ????? ?? ? ?? ?? ??? ??? ?? ?????.

??? ?? ? ? ???? ?????? ??? ? ? ?? ??? ????? ? ?? ???? ??? ?? ????? ??? ??? ??? ? ????? ??? ????? ?????. ?????? ??? ???? ? ??? ? ? ????. ????? ??? ??? ? ??? ?? ?? ???? ???? ??? ?? ????? ?????? "Ready"? ???? ?? ???? ????. ??? ?? "??? ???? ? ???"? ??? ? ????. ?????? ??!

???? ?? ??

?? ??? ?? ?? ?? ????? ??? ????? ?? ??? ???. ? ?? ?? ??? ????. ??, ?? ?? ??? ????. ??? React? ??? ?? ??? ????????? ?? ????? "???"?? ????. ?? ?? ???? ?? ?? ???? ?? ??? "??"? ??????. ??? ? ??? ??? ??? ? ? ??? (??? ???) ?? ??? ??? ?? ???? ???? ??? ?? ???? ????. React? ??? ???? ?? ??? ?? ???? ???? ?? ??? ??? ??????. ??? ?? ???? React? ?? ???? ?? ? ????. ? ??? ??????. ?????. ?? ?? ???? ??????? ????? ??? ?????? ????, ??? ??? ? ? ??? ?? ? ??? ?? ? ????.

????? ? ?? ??? "??"?? ????? ?????. ??? ??? ??? ????? ?? ?????, ??? ?? ??? ?? ??? ??? ? ??? ???, ?? ?? ???? ??? ??? ?? ???? . ?? ?? ????? ?? ? ??? ?? ??? ?? ??????. ?? React? ??? ??? ????? ?? ??? ? ? ??? "????"?? ??? ???? ????? ???? ?? ? ? ????.

???? ???????!

??,? ??? ?? ??? ????? ??? ??? ??? ??? ???? ????. ??? ?? ?? ??? ?? ??? ???? ??????. ?? ?? ????? ?? ????? ??? ????? ?????. ? ???? ??? ??? ??? ???? ???? ? ?? ??? ??? ??? ?????.

??, ????!

??? ?? ???? ???? ? ??? ?? ??? ????? ????. ??? ? ?? ??? ??????<suspenseimage></suspenseimage> SRC ??? ???? ?? ??, ???? ?????? ?? ???? ?? ? ?? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358885649082.png" class="lazy" alt="React ??????? ?? ?? ???"> HTML?? ???? ????? javaScript? Image() ??? ???? ???? ???? ???? ?? ?? ????. ??, ?? ?? ???? ???? ????? ?????? ? ? ???? onload ??? ????. ??? ?? ????.

 const img = new image ();
img.onload = () => {
  // ?????? ?};

??? ??? ??? ??? ???? ??? ?? ?????? ??? ?? ?? ??, ?? ??? ?? ?? ??? ? ????.

 const sustenseimg = ({src, ... rest}) => {
  ??? ??? ????? ((Resolve) => {
    const img = new image ();
    img.onload = () => {
      ????();
    };
    img.src = src;
  });
  ??<img alt="" src="%7Bsrc%7D"> ;
};

?? ??? ??? ?? ??? ?? ???? ????. ?? ? ??? ???? ?????<suspenseimg></suspenseimg> ??? ???? ??? ??? ????? ?? ?????. ??, ??? ?? ????? ?? ??? ??? ????. ??? ??? ?? ??? ?? ??? ???? ??? ? ??? ??? ?? ???? (?? ?? ?? ??? ??? ????). SRC? ??? ??? ????????? ???? ??? ?? ?? ????? ???? ??? ?????. ??? ???? ?????? true? ???? React? ?? ??? ???? ????????.

??? ??? ????<suspenseimage></suspenseimage> ?? ??? ?? :

 ???? const spessenseimg = ({src, ... rest}) => {
  imgcache.read (SRC);
  ??<img  src="%7Bsrc%7D" alt="React ??????? ?? ?? ???" > ;
};

??? ??? ?? ??? ??? ????.

 const imgcache = {
  __cache : {},
  ?? (src) {
    if (! this .__ ?? [src]) {
      ? .__ ?? [SRC] = ??? ?? ((resolve) => {
        const img = new image ();
        img.onload = () => {
          ? .__ ?? [src] = true;
          Resolve (this .__ ?? [SRC]);
        };
        img.src = src;
      });
    }
    if (this .__ cache [src] instanceof promise) {
      this .__ ?? [SRC];
    }
    ? .__ ?? [SRC];
  }
};

????? ??? ??? ?????. ?? ?????.

????

??? ?? ?? ??? ?? ????? ?? ???? ?? ?? ???? ???? ????. ??? ? ? ?? ? ????.

??? ??? ???? ??? ?????. ???? ??? ???? ??? ???? ??? ???? ?? ??? ?????. ???? ?? ?? ??? ?? ??? ???? ??? ???? ??? ?????? (??? ???? ??? ?? ??? ?? ??? ?????). ?? ???????? ???? ??? ?? ?? ???? ????? ? ??? ?? ??? ?? ?? ??? ?????? ???? ?? ?? ????? ??? ?? ? ?????.

 ?? ? () {
  ?? (
    <suspense fallback="{<Loading"></suspense> }>
      <showimages></showimages>
    
  );
}

<loading></loading> ?? ??? ?? ?????? ?? ?? ??????? ??? ??? ???? ?? ??? ?????? ?? ??? ? ??? ??? ? ? ????.

???? ???<showimages></showimages> ?? ??? ?? ??? ???? ???? ??????.

<div>
  {images.map ((img) => (
    <div key="{img}">
      <suspenseimg alt="" src="%7Bimg%7D"></suspenseimg>
    </div>
  ))}
</div>

?? ??? ?? ???? ?? ???? ?? ? ??? ????,? ???? ????? ? ?? ???? ??? ?????.

?? ?? ????

???? ???? ??? ?? ???? ????? ? ??? ?? ????? ????. ?? ?? ???? ????? ? ? ?????. ??? useTransition ??? ?????? ?????. ??? ??? ?? ????? ?? ???? ?????? ???? startTransition ??? isPending ??? ????? (?? ???? ???? ?? ????? ?? ?? ??? ??? ?? ? ? ??). ?????, useTransition ????, timeoutMs ?? ???????.? ?? ?? ??? ?? ?????. isPending ???? ?? ? ? ????. ? ? RECT? ??? ???? ??? ? ? ???? (??? ?? ?? timeoutMs ?? ??? ?? ? ? ??? ?? ???? ???? ? ? ?? ?? ????? ??? ? ?? ??? ? ????).

??? ?? ?????.

 const [startTransition, Ispending] = Usetransition ({timeoutms : 100000});

??? ?? ????? ?? 10 ?? ?? ? ? ????.? ???? ?? ??? ?? DevTools? ????? ??? ? ? ???? ??? ?????.

?? ??? ??? ????. ? ?? ???????? ??? ???? ??? ??? ????.

 startTransition (() => {
  setPage ((p) => p 1);
});

? ?? ????? ? GraphQL ????? Micro-GraphQL-React? ???? ??? ?????? ??????. ?? ????? ???? ??? ?? ?? ? ???? ??????. ???? ???? ???? ?????? ?? ??? ????? ?? ???????. ? ?? ?? ????? isPending ?? ????? ?? ??? ??? ?? ???? ?? ? ? ????.

??? ??? ?????

??? ?? ??? ???? ?? React? ??? ???? ??? ? ??? ?? ? ????. ?? ??? ???? ??? ?? ? ? :

 {images.map ((img) => (

... ??? ??? ????? ?<suspenseimage></suspenseimage> , ? ?? ???? ?????, ??? ??, ? ?? ???? ?? ? ?? (?? ???), ? ?? ???, ? ??, 4 ?? ?? ?????. ??? ????? ?? ?? ??,? ?? ???? ???? ?? ??? ?? ???? ???? ???? ????? ?? ? ? ????.

React? ???? ???? ??? ??? ??? ?? ?? ??? ???? ??? ????? ??? ???? ? ??? ????. ??? ??? ?? ?? ??? ?? ??? ?? ?? ? ??? ????. ??, ??? ??? ?? ?? ??? ?? ?? ??? ?? ?????????. ?????. ??? 0? ?????? ? ?, ???? ?????, React? ???? ?? ??? 1? n?? ?????????.

? ??? ??????? ?? ???? ???? ?? ? ? ????? ? ? ????. ?? ??? ??? ???? ??? ?? ???? ??? ?? ????, ???? ??? ??? ???????. ? ??? ??? ?? ???? ???? ??? "?? 3G"? ?? ? ????.

??? ??, ??? ??? ??? ?? ??? ????? ?? ?? ??? ?? ??? ??? ?? ?? ???? ? ???? ???? ????? ????? ???? ?? ???? ?? ? ? ????.

 images.foreach ((img) => imgcache.read (img));

?? ??? ???? ?? ??? ??????. ? ??? ????? ? ? ???? ?? ?? ???? ??? ???? ?? ? ?? ? ? ???? (??? ???? ??? ????? ?? ?? ???? ).

??? ???

????? ??? ?? ??? ??? ???????. ???? ?? ?? ??? ?? ???? ??? ? ?? ???????. ?? ??? ? ???? ????? ??<imagelist></imagelist> , ? ???? ?? ?? ??? ??? ???? React? ?? ???? ???? ??? React? ??? ??? ? ? ???? ??? ?????.

? ??? ????? ??? ??? ??? ?? ??? ?? ???? ??? ? ????????? ????. ?, ?? ???? ??? ??????.

 const {data1} = useuspensequery (query1, vars1);
const {data2} = useuspensequery (query2, vars2);

??? ??? ??? ?? ??? ?? ??? ??? ? ?? ???? ??? ???? ?????. ??? ?? ??? ??, ???? ?? ? ??? ???? ???????.

??

??? ?? ??? ?? ?????. ??? ?? ? ??? ?????.

??? ?? ?? ??? ?? DevTools ???? ?? ??? ???? ? ?? ??? ?? ???? ????. ??? ??? ?? ??? ?????.

??? ??? ??? ??? ?? ?????. ??? ? ?? ??? ?? ?? ???? ?? ?? ??? ????.

 settimeout (() => resolve ({}), 7000);

?? ???? ?????? ?? ????? ??? ?? ??? ?? ?? ??? ??????? ??? ???? ????? ???? ?? ?? ?? ????. ??? ?? ? ??? ???? ???? ????? ?? ?????. ???? ??? ?? ? ?? ???? ? ? ??? ????? ??? ??? ???? ??? ????. ?? 7 ?? ?? ???? ??? ?? ???? DevTools? ????? ??? ???? ????? ???? ????? ??? ? ??? ?????.

???? Precache ??? ???? ????. ????? ????? ?? ??? ?? ?? ? ? ????.<img alt="React ??????? ?? ?? ???" > ?? ??<suspenseimage></suspenseimage> ?? ??, ???? ??? "?? ??"? ????? (??? ??? ? ???? ????. ??? ??? ?? UI? ??? ??? ??? ? ? ????).

????? Codesandbox? ????? ?? ??? ??? ????? ?? ? ???? ??? ????? ???? ???? ?? ?? ??? ??????.

?? ?? ???

? ??? ??? ? ??? ? ???????. ????? ???? ? ???? ???? ??? ??? ??? ?? ?? ??? ????. ??? ?? ???? ???? ?? URL? ???? ?????.

 const [cachebuster, setcachebuster] = usestate (initial_time);

const {data} = useuspensequery (get_images_query, {page});
const images = data.allbooks.books.map (
  (b) => b.smallimage`? cachebust = $ {cachebuster}`
);

Initial_Time? ?? ?? (?, ? ??)?? ?????.

 const initial_time = ? ?? ();

?? ? ????? ???? ????? :

 const [cachebuster, setcachebuster] = usestate (new date ());

... ??? ???? ??? ??? ??? ? ?? ?????. ? ?? ????? ???? ???? ?????. ??? ???? ???? ??? ???? ???? ???? ??? ??? ?????. ?? ??? ?? ???? RECT? ???? ?? ????? ???? ?? ?? ??? ????? . ?, ??? ?????.

 const [cachebuster, setcachebuster] = usestate (new date ());

... ??? ?? ??? ?? ???? ??? ??? URL ??? ???? ?? ????? ??? ????. ?? ??? ???? ??? Codesandbox ??? ??? ????? (???? ??????).

???? ?? ??? ?? ? ?? ???? ?? ??? ??? ??? ??? ???? ? ? ??? ????. ???? ?????? ???? ????. RECT? ?? ??? ?? ? ?? ?????? ?? ? ? ????? (??? ?? ??? ???) ?? ? ??? ??? ??? ??? ??????.

? ??? React ??????? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!