網(wǎng)站首頁 編程語言 正文
骨架屏是什么?
找到這里的同志,或多或少都對骨架屏有所了解,請容許我先啰嗦一句。骨架屏(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)容沒有加載出來前讓用戶提前感知,可以提高用戶體驗 如果我們每次寫組件的時候都要為其定制骨架,那就顯得相當繁瑣
得益于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> ); } };
完整代碼及其使用文檔
文檔 https://magic-zhu.github.io/obiusm-react-components-docs/components/skeleton/
原文鏈接:https://juejin.cn/post/7038221975902240805
相關(guān)推薦
- 2022-02-25 Oracle?觸發(fā)器實現(xiàn)主鍵自增效果_oracle
- 2022-05-25 Docker?compose配置文件寫法及命令使用示例_docker
- 2022-10-15 python?實現(xiàn)syslog?服務(wù)器的詳細過程_python
- 2022-05-13 Github pages 同步到Gitee pages 并自動更新Gitee pages
- 2022-05-19 基于角色的權(quán)限控制模型RBAC圖文教程_相關(guān)技巧
- 2022-08-21 Python?海象運算符(?:=)的三種用法_python
- 2022-04-25 C#條件拼接Expression<Func<T,?bool>>的使用_C#教程
- 2022-12-06 Docker基礎(chǔ)和常用命令詳解_docker
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支