React實現(xiàn)一個通用骨架屏組件示例

更新時間：2021年12月06日 15:39:12 作者：magic_zhu

骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請求數(shù)據(jù)返回后再渲染頁面，補充進需要顯示的數(shù)據(jù)內(nèi)容，本文就介紹了React實現(xiàn)一個通用骨架屏組件示例，分享給大家，感興趣的可以了解一下

骨架屏是什么？

找到這里的同志，或多或少都對骨架屏有所了解，請容許我先啰嗦一句。骨架屏(Skeleton Screen)是一種優(yōu)化用戶弱網(wǎng)體驗的方案，可以有效緩解用戶等待的焦躁情緒。

Demo

先看個demo 大概了解下最終的產(chǎn)物及其使用方式

npm install obiusm-react-components

import { Skeleton } from 'obiusm-react-components';

  <Skeleton isVisible={true}>
    <div className="wrapper">
      <div className="content1"></div>
      <div data-skeleton-ignore={true}>123456</div>
      <div className="content2"></div>
      <div className="content3" data-skeleton-style={{ width: '50%' }}></div>
    </div>
  </Skeleton>

只需要在自己寫的組件外面包一層決定其是否顯示就可以了

設(shè)計思路

骨架可以在真實內(nèi)容沒有加載出來前讓用戶提前感知，可以提高用戶體驗如果我們每次寫組件的時候都要為其定制骨架，那就顯得相當(dāng)繁瑣

得益于React props的這種數(shù)據(jù)數(shù)據(jù)傳遞方式，我們在props中可以輕松拿到整顆ReactElement的樹。那么我們只需要去遞歸遍歷這個樹從而去模仿其結(jié)構(gòu)，復(fù)制其class就可以實現(xiàn)自動生成骨架了。

但在具體的使用上，我們可能只需要結(jié)構(gòu)前幾層的結(jié)構(gòu)而不需要模擬整顆樹的結(jié)構(gòu)，也有可能自動生成的樣式太丑我們需要定制其節(jié)點樣式，還有可能我們不需要關(guān)注一些浮層類的內(nèi)容或者說想忽略某一個節(jié)點

所以大概需要實現(xiàn)以下幾個功能

設(shè)定遞歸深度
提供忽略節(jié)點的方法
提供定制骨架節(jié)點樣式的方法

具體實現(xiàn)

首先定義一個組件函數(shù)來決定是渲染骨架屏還是真實元素

function Skeleton(props: Props) {
  if (!props) {
    return <div />;
  }
  if (props.isVisible) {
    return createModal(props.children, props.depth || 4, 0);
  } else {
    return props.children ? props.children : <div />;
  }
}

createModal 對Skeleton下面包住的div進行遞歸遍歷，每次遞歸的時候?qū)urrent+1并傳遞下去，這樣我們可以判斷已經(jīng)遞歸了幾層了判斷一下每個節(jié)點上data-skeleton-ignore是否有data-skeleton-style從而特殊處理就可以了

const createModal = (child: ReactElement, depth: number, current: number) => {
  if (
    depth === current ||
    (child && child.props && child.props['data-skeleton-ignore'])
  ) {
    return;
  }
  if (
    child &&
    child.props &&
    child.props.children &&
    Array.isArray(child.props.children) &&
    current < depth - 1
  ) {
    return (
      <div
        className={`${
          child.props.className !== undefined ? child.props.className : ''
        } ${'react-skeleton'}`}
        style={
          child.props && child.props['data-skeleton-style']
            ? child.props['data-skeleton-style']
            : {}
        }
        key={Math.random() * 1000}
      >
        {child.props.children && child.props.children.length > 0
          ? child.props.children.map((child: any) => {
              return createModal(child, depth, current + 1);
            })
          : '*'}
      </div>
    );
  } else {
    return (
      <div
        className={`${
          child.props && child.props.className ? child.props.className : ''
        } ${'react-skeleton2'}`}
        style={
          child.props && child.props['data-skeleton-style']
            ? child.props['data-skeleton-style']
            : {}
        }
        key={Math.random() * 1000}
      >
        *
      </div>
    );
  }
};

完整代碼及其使用文檔

完整代碼 obiusm-react-components

文檔 https://magic-zhu.github.io/obiusm-react-components-docs/components/skeleton/

到此這篇關(guān)于React實現(xiàn)一個通用骨架屏組件示例的文章就介紹到這了,更多相關(guān)React 骨架屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: