perf(native): improve performance by removing the internal state (#193)

* perf(native): improve perfomance removing internal state related #178 related #187 * test(native): update snapshots
2026-01-12 22:50:00 +08:00 · 2020-04-08 09:53:26 +01:00
parent 56139989e4
commit ab22b9cfcb
10 changed files with 57 additions and 90 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
  "name": "react-content-loader",
-  "version": "5.0.1",
  "description": "SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)",
  "repository": {
    "type": "git",
--- a/src/native/Svg.tsx
+++ b/src/native/Svg.tsx
@@ -10,9 +10,10 @@ import Svg, {

 import uid from '../shared/uid'
 import { IContentLoaderProps } from './'
-import offsetValueBound from './offsetValueBound'

-class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
+
+class NativeSvg extends Component<IContentLoaderProps> {
  static defaultProps = {
    animate: true,
    backgroundColor: '#f5f6f7',
@@ -22,8 +23,6 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
    style: {},
  }

-  state = { offset: -1 }
-
  animatedValue = new Animated.Value(0)

  fixedId = this.props.uniqueKey || uid()
@@ -50,18 +49,6 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
  componentDidMount = () => {
    if (this.props.animate) {
      this.setAnimation()
-
-      this.animatedValue.addListener(({ value }) => {
-        this.setState({
-          offset: value,
-        })
-      })
-    }
-  }
-
-  componentWillUnmount = () => {
-    if (this.props.animate) {
-      this.animatedValue.removeAllListeners()
    }
  }

@@ -75,9 +62,17 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
      ...props
    } = this.props

-    const offset1 = offsetValueBound(this.state.offset - 1)
-    const offset2 = offsetValueBound(this.state.offset)
-    const offset3 = offsetValueBound(this.state.offset + 1)
+    const x1Animation = this.animatedValue.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [-1, 2],
+      outputRange: ['-100%', '100%'],
+    })
+
+    const x2Animation = this.animatedValue.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [-1, 2],
+      outputRange: ['0%', '200%'],
+    })

    const rtlStyle: object = rtl ? { transform: [{ rotateY: '180deg' }] } : {}
    const svgStyle = Object.assign(Object.assign({}, style), rtlStyle)
@@ -101,17 +96,17 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
        <Defs>
          <ClipPath id={this.idGradient}>{children}</ClipPath>

-          <LinearGradient
+          <AnimatedLinearGradient
            id={this.idClip}
-            x1={'-100%'}
+            x1={x1Animation}
+            x2={x2Animation}
            y1={0}
-            x2={'100%'}
            y2={0}
          >
-            <Stop offset={offset1} stopColor={backgroundColor} />
-            <Stop offset={offset2} stopColor={foregroundColor} />
-            <Stop offset={offset3} stopColor={backgroundColor} />
-          </LinearGradient>
+            <Stop offset={0} stopColor={backgroundColor} />
+            <Stop offset={0.5} stopColor={foregroundColor} />
+            <Stop offset={1} stopColor={backgroundColor} />
+          </AnimatedLinearGradient>
        </Defs>
      </Svg>
    )
--- a/src/native/tests/snapshots/snapshots.test.tsx.snap
+++ b/src/native/tests/snapshots/snapshots.test.tsx.snap
@@ -62,8 +62,8 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
    </ClipPath>
    <LinearGradient
      id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -72,11 +72,11 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
@@ -146,8 +146,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
    </ClipPath>
    <LinearGradient
      id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -156,11 +156,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
@@ -230,8 +230,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
    </ClipPath>
    <LinearGradient
      id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -240,11 +240,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
@@ -314,8 +314,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
    </ClipPath>
    <LinearGradient
      id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -324,11 +324,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
--- a/src/native/tests/offsetValueBound.test.ts
+++ b/src/native/tests/offsetValueBound.test.ts
@@ -1,14 +0,0 @@
-import offsetValueBound from '../offsetValueBound'
-
-describe('offset value bound ', () => {
-  it('should return an integer', () => {
-    expect(offsetValueBound(-1)).toBe(0)
-    expect(offsetValueBound(0)).toBe(0)
-  })
-
-  it('should return a max value 1', () => {
-    expect(offsetValueBound(1)).toBe(1)
-    expect(offsetValueBound(1.1)).toBe(1)
-    expect(offsetValueBound(2)).toBe(1)
-  })
-})
--- a/src/native/tests/presets/snapshots/BulletListStyle.test.tsx.snap
+++ b/src/native/tests/presets/snapshots/BulletListStyle.test.tsx.snap
@@ -74,8 +74,8 @@ exports[`BulletListStyle renders correctly 1`] = `
    </ClipPath>
    <LinearGradient
      id="BulletListStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -84,11 +84,11 @@ exports[`BulletListStyle renders correctly 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
--- a/src/native/tests/presets/snapshots/CodeStyle.test.tsx.snap
+++ b/src/native/tests/presets/snapshots/CodeStyle.test.tsx.snap
@@ -78,8 +78,8 @@ exports[`CodeStyle renders correctly 1`] = `
    </ClipPath>
    <LinearGradient
      id="CodeStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -88,11 +88,11 @@ exports[`CodeStyle renders correctly 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
--- a/src/native/tests/presets/snapshots/FacebookStyle.test.tsx.snap
+++ b/src/native/tests/presets/snapshots/FacebookStyle.test.tsx.snap
@@ -62,8 +62,8 @@ exports[`FacebookStyle renders correctly 1`] = `
    </ClipPath>
    <LinearGradient
      id="FacebookStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -72,11 +72,11 @@ exports[`FacebookStyle renders correctly 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
--- a/src/native/tests/presets/snapshots/InstagramStyle.test.tsx.snap
+++ b/src/native/tests/presets/snapshots/InstagramStyle.test.tsx.snap
@@ -51,8 +51,8 @@ exports[`InstagramStyle renders correctly 1`] = `
    </ClipPath>
    <LinearGradient
      id="InstagramStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -61,11 +61,11 @@ exports[`InstagramStyle renders correctly 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
--- a/src/native/tests/presets/snapshots/ListStyle.test.tsx.snap
+++ b/src/native/tests/presets/snapshots/ListStyle.test.tsx.snap
@@ -70,8 +70,8 @@ exports[`ListStyle renders correctly 1`] = `
    </ClipPath>
    <LinearGradient
      id="ListStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
      y1={0}
      y2={0}
    >
@@ -80,11 +80,11 @@ exports[`ListStyle renders correctly 1`] = `
        stopColor="#f5f6f7"
      />
      <Stop
-        offset={0}
+        offset={0.5}
        stopColor="#eee"
      />
      <Stop
-        offset={0}
+        offset={1}
        stopColor="#f5f6f7"
      />
    </LinearGradient>
--- a/src/native/offsetValueBound.ts
+++ b/src/native/offsetValueBound.ts
@@ -1,13 +0,0 @@
-const offsetValueBound = (value: number): number => {
-  if (value > 1) {
-    return 1
-  }
-
-  if (value < 0) {
-    return 0
-  }
-
-  return value
-}
-
-export default offsetValueBound