react-content-loader与React Native性能对比：Web vs Native

【免费下载链接】react-content-loader ⚪ SVG-Powered component to easily create skeleton loadings. 项目地址: https://gitcode.com/gh_mirrors/re/react-content-loader

项目概述

react-content-loader是一个基于SVG的组件，用于轻松创建骨架屏加载效果。它同时支持Web和React Native平台，通过不同的实现方式为两个平台提供一致的用户体验。本文将深入对比分析Web和Native两种实现的性能差异及适用场景。

基本信息

• 项目名称：GitHub 加速计划 / re / react-content-loader
• 项目路径：gh_mirrors/re/react-content-loader
• 项目描述：⚪ SVG-Powered component to easily create skeleton loadings.
• 版本信息：6.2.1（从package.json获取）

架构设计对比

react-content-loader采用了平台分离的架构设计，为Web和React Native提供了独立的实现。这种设计使得两个平台可以针对各自的特性进行优化。

目录结构

项目源代码主要分为Web和Native两个部分：

• Web实现：src/web/
• Native实现：src/native/
• 共享代码：src/shared/

这种分离的架构允许开发者为不同平台编写特定的代码，同时共享通用逻辑。

核心组件对比

Web平台核心组件

Web平台的核心组件是src/web/ContentLoader.tsx：

import * as React from 'react'
import { Facebook, IContentLoaderProps } from '.'
import Svg from './Svg'

const ContentLoader: React.FC<IContentLoaderProps> = props =>
  props.children ? <Svg {...props} /> : <Facebook {...props} />

export default ContentLoader

这个实现非常简洁，它根据是否有子元素来决定渲染自定义内容还是默认的Facebook风格骨架屏。

React Native平台核心组件

Native平台的核心组件是src/native/ContentLoader.tsx：

import * as React from 'react'
import { Circle, Path, Rect } from 'react-native-svg'

import { Facebook, IContentLoaderProps } from '.'
import Svg from './Svg'

const ContentLoader: React.FC<IContentLoaderProps> = props =>
  props.children ? <Svg {...props} /> : <Facebook {...props} />

export { Circle, Rect, Path }

export default ContentLoader

与Web版本相比，Native版本额外导出了Circle、Rect和Path组件，这些是react-native-svg库提供的基础图形组件。

性能对比分析

渲染性能

Web平台渲染机制

Web平台的SVG渲染是通过src/web/Svg.tsx实现的，它直接使用浏览器原生的SVG支持：

<svg
  aria-labelledby={idAria}
  role="img"
  style={{ ...style, ...rtlStyle }}
  {...props}
>
  {/* SVG内容 */}
</svg>

浏览器对SVG有原生支持，这意味着渲染过程直接由浏览器引擎处理，性能通常很好。动画效果通过SVG的animateTransform元素实现，这也是一种浏览器原生支持的动画方式。

React Native平台渲染机制

React Native平台使用react-native-svg库来渲染SVG内容。这个库将SVG元素转换为React Native组件，然后再渲染到原生视图上。这种间接的渲染方式可能会带来一些性能开销，但允许SVG在不支持WebView的环境中使用。

动画性能

Web平台动画实现

Web平台的动画是通过SVG的animateTransform元素实现的：

<animateTransform
  attributeName="gradientTransform"
  type="translate"
  values={`${from}; 0 0; ${to}`}
  dur={dur}
  repeatCount="indefinite"
/>

这种动画由浏览器的 compositor thread 处理，通常非常流畅，不会阻塞主线程。

React Native平台动画实现

React Native平台的动画实现需要依赖react-native-svg库对动画的支持，这可能涉及到JavaScript桥接和原生视图更新，相比Web平台的原生SVG动画可能会有更高的性能开销。

内存占用

由于React Native需要维护JavaScript和原生之间的桥接，以及额外的视图层级，通常情况下，相同的骨架屏在React Native中会比Web平台占用更多内存。不过，这种差异在简单的骨架屏上可能不明显。

使用示例对比

Web平台使用示例

以Facebook风格的骨架屏为例，Web平台的实现是src/web/presets/FacebookStyle.tsx：

import * as React from 'react'
import { IContentLoaderProps } from '..'
import ContentLoader from '../ContentLoader'

const ReactContentLoaderFacebook: React.FC<IContentLoaderProps> = props => (
  <ContentLoader viewBox="0 0 476 124" {...props}>
    <rect x="48" y="8" width="88" height="6" rx="3" />
    <rect x="48" y="26" width="52" height="6" rx="3" />
    <rect x="0" y="56" width="410" height="6" rx="3" />
    <rect x="0" y="72" width="380" height="6" rx="3" />
    <rect x="0" y="88" width="178" height="6" rx="3" />
    <circle cx="20" cy="20" r="20" />
  </ContentLoader>
)

export default ReactContentLoaderFacebook

React Native平台使用示例

Native平台的Facebook风格骨架屏实现是src/native/presets/FacebookStyle.tsx：

import * as React from 'react'
import { IContentLoaderProps } from '..'
import ContentLoader, { Circle, Rect } from '../ContentLoader'

const ReactContentLoaderFacebook: React.FC<IContentLoaderProps> = props => (
  <ContentLoader viewBox="0 0 476 124" width={476} height={124} {...props}>
    <Rect x="48" y="8" width="88" height="6" rx="3" />
    <Rect x="48" y="26" width="52" height="6" rx="3" />
    <Rect x="0" y="56" width="410" height="6" rx="3" />
    <Rect x="0" y="72" width="380" height="6" rx="3" />
    <Rect x="0" y="88" width="178" height="6" rx="3" />
    <Circle cx="20" cy="20" r="20" />
  </ContentLoader>
)

export default ReactContentLoaderFacebook

使用方式对比

从代码上看，两个平台的使用方式非常相似，但有几个关键区别：

1. 显式尺寸定义：Native版本显式指定了width和height属性，而Web版本依赖viewBox来自动调整大小。

2. 组件导入：Native版本从ContentLoader中导入了Circle和Rect组件，而Web版本直接使用SVG原生元素。

3. 属性命名：Web版本使用小写的rect和circle元素，而Native版本使用大写的Rect和Circle组件。

性能优化建议

Web平台优化

1. 减少DOM操作：尽量复用ContentLoader组件，避免频繁创建和销毁。

2. 合理设置动画参数：通过调整speed属性控制动画性能，可以在低端设备上降低动画速度。

3. 使用CSS containment：对ContentLoader容器应用CSS containment属性，帮助浏览器优化渲染。

React Native平台优化

1. 控制重渲染：使用React.memo包装ContentLoader组件，减少不必要的重渲染。

2. 避免过度动画：在性能受限的设备上，可以通过animate={false}禁用动画。

3. 合理设置尺寸：始终显式设置width和height属性，避免布局计算带来的性能开销。

适用场景分析

何时选择Web实现

1. Web应用：显然，Web应用应该使用Web实现。

2. 复杂动画需求：如果需要复杂的骨架屏动画，Web平台的SVG动画性能通常更好。

3. 轻量级集成：Web实现不需要额外的原生依赖，集成更简单。

何时选择React Native实现

1. React Native应用：在React Native应用中，应该使用Native实现。

2. 跨平台一致性：如果需要在iOS和Android上保持高度一致的外观，Native实现是更好的选择。

3. 离线使用：React Native实现不依赖WebView，可以在完全离线的环境中使用。

结论

react-content-loader为Web和React Native平台提供了优秀的骨架屏解决方案。通过平台特定的实现，它能够充分利用各个平台的优势，提供最佳的用户体验。

Web实现利用浏览器原生SVG支持，提供了出色的渲染性能和丰富的动画效果。而React Native实现则通过react-native-svg库，在移动平台上提供了接近原生的性能和一致的用户体验。

在选择实现方式时，应主要考虑目标平台和具体的性能需求。无论选择哪种实现，react-content-loader都能提供高效、灵活的骨架屏解决方案，帮助提升应用的感知性能和用户体验。

参考资料

1. 官方文档：README.md
2. Web核心实现：src/web/ContentLoader.tsx
3. Native核心实现：src/native/ContentLoader.tsx
4. 项目配置：package.json

【免费下载链接】react-content-loader ⚪ SVG-Powered component to easily create skeleton loadings. 项目地址: https://gitcode.com/gh_mirrors/re/react-content-loader