From 3ce4cb89ad8951b03b3fe71cefbec186eb02e6d1 Mon Sep 17 00:00:00 2001 From: jimizai <359743984@qq.com> Date: Thu, 1 Feb 2024 20:08:21 +0800 Subject: [PATCH 01/11] Feat/canvas mega async call (#6782) * feat: use async call replace sync call * fix: bug fixed --- packages/cache-canvas/src/index.tsx | 124 +++++++++++++--------------- 1 file changed, 58 insertions(+), 66 deletions(-) diff --git a/packages/cache-canvas/src/index.tsx b/packages/cache-canvas/src/index.tsx index dbb4707bb6..7cd98d336f 100644 --- a/packages/cache-canvas/src/index.tsx +++ b/packages/cache-canvas/src/index.tsx @@ -1,8 +1,5 @@ import { useEffect, useState, useImperativeHandle, forwardRef, useCallback } from 'react'; -import type { - HTMLAttributes, - ReactElement, -} from 'react'; +import type { HTMLAttributes, ReactElement } from 'react'; import * as React from 'react'; import { isNode } from 'universal-env'; import { Storage } from './storage'; @@ -47,17 +44,7 @@ export type CacheCanvasProps = { }; export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => { - const { - id, - init, - useCache = true, - getSnapshot, - fallback, - style, - className, - bizID = '', - ...rest - } = props; + const { id, init, useCache = true, getSnapshot, fallback, style, className, bizID = '', ...rest } = props; const [renderedCanvas, setRenderedCanvas] = useState(!useCache); const [mounted, setMounted] = useState(false); @@ -102,69 +89,74 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => { return ( <> - - { - !renderedCanvas && (<> + + {!renderedCanvas && ( + <> - { - (typeof fallback === 'function') && (
- { - (isNode || !Storage.getItem(cacheKey, { bizID })) && fallback() - } -
) - } + {typeof fallback === 'function' && ( +
{(isNode || !Storage.getItem(cacheKey, { bizID })) && fallback()}
+ )}