client: improve component render time

This commit is contained in:
fantasticit 2022-05-25 10:09:30 +08:00
parent 5e6f283032
commit d1f51707a8
3 changed files with 39 additions and 34 deletions

View File

@ -1,5 +1,5 @@
import { IconArticle, IconChevronLeft } from '@douyinfe/semi-icons'; import { IconChevronLeft } from '@douyinfe/semi-icons';
import { Button, Nav, Popover, Skeleton, Space, Spin, Tooltip, Typography } from '@douyinfe/semi-ui'; import { Button, Nav, Skeleton, Space, Spin, Tooltip, Typography } from '@douyinfe/semi-ui';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { Divider } from 'components/divider'; import { Divider } from 'components/divider';
import { DocumentCollaboration } from 'components/document/collaboration'; import { DocumentCollaboration } from 'components/document/collaboration';
@ -50,16 +50,20 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
}); });
}, [document, documentId]); }, [document, documentId]);
const actions = ( const actions = useMemo(
<Space> () =>
{document && authority.readable && ( docAuthLoading ? null : (
<DocumentCollaboration key="collaboration" wikiId={document.wikiId} documentId={documentId} /> <Space>
)} {document && authority.readable && (
<DocumentShare key="share" documentId={documentId} /> <DocumentCollaboration key="collaboration" wikiId={document.wikiId} documentId={documentId} />
<DocumentVersion key="version" documentId={documentId} onSelect={triggerUseDocumentVersion} /> )}
<DocumentStar key="star" documentId={documentId} /> <DocumentShare key="share" documentId={documentId} />
<DocumentStyle /> <DocumentVersion key="version" documentId={documentId} onSelect={triggerUseDocumentVersion} />
</Space> <DocumentStar key="star" documentId={documentId} />
<DocumentStyle />
</Space>
),
[docAuthLoading, documentId, document, authority]
); );
useEffect(() => { useEffect(() => {

View File

@ -76,27 +76,28 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
}, [document]); }, [document]);
const actions = useMemo( const actions = useMemo(
() => ( () =>
<Space> docAuthLoading ? null : (
{document && authority.readable && ( <Space>
<DocumentCollaboration key="collaboration" wikiId={document.wikiId} documentId={documentId} /> {document && authority.readable && (
)} <DocumentCollaboration key="collaboration" wikiId={document.wikiId} documentId={documentId} />
{authority && authority.editable && ( )}
<Tooltip key="edit" content="编辑" position="bottom"> {authority && authority.editable && (
<Button icon={<IconEdit />} onMouseDown={gotoEdit} /> <Tooltip key="edit" content="编辑" position="bottom">
</Tooltip> <Button icon={<IconEdit />} onMouseDown={gotoEdit} />
)} </Tooltip>
{authority && authority.readable && ( )}
<> {authority && authority.readable && (
<DocumentShare key="share" documentId={documentId} /> <>
<DocumentVersion key="version" documentId={documentId} /> <DocumentShare key="share" documentId={documentId} />
<DocumentStar key="star" documentId={documentId} /> <DocumentVersion key="version" documentId={documentId} />
</> <DocumentStar key="star" documentId={documentId} />
)} </>
<DocumentStyle /> )}
</Space> <DocumentStyle />
), </Space>
[document, documentId, authority, gotoEdit] ),
[docAuthLoading, document, documentId, authority, gotoEdit]
); );
const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]); const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);

View File

@ -263,7 +263,7 @@ export const useWikiTocs = (wikiId) => {
const { data, error, refetch } = useQuery( const { data, error, refetch } = useQuery(
WikiApiDefinition.getTocsById.client(wikiId), WikiApiDefinition.getTocsById.client(wikiId),
() => (wikiId ? getWikiTocs(wikiId) : null), () => (wikiId ? getWikiTocs(wikiId) : null),
{ staleTime: 3000 } { staleTime: 2000 }
); );
const loading = !data && !error; const loading = !data && !error;