React-Native多个GL节点堆叠在一起会引发性能问题

Question

我正在尝试使用React-Native在gl-react-v2中的照片上添加多种效果。

这是我用来编辑图像的简单效果示例：

import GL from 'gl-react';
import React from 'react';
import PropTypes from 'prop-types';

const shaders = GL.Shaders.create({
  Negative: {
    frag: `
    precision highp float;
    varying vec2 uv;
    uniform sampler2D t;
    uniform float factor;

    void main() {
      vec4 c = texture2D(t, uv);
      gl_FragColor = vec4(mix(c.rgb, 1.0 - c.rgb, factor), c.a);
    }
  `
  }
});

module.exports = GL.createComponent(
  ({children: t, factor}) => {
    return (
      <GL.Node
        shader={shaders.Negative}
        uniforms={{t, factor}}
      />
    );
  },
  {
    displayName: 'Negative',
    defaultProps: {
      factor: 1
    },
    propTypes: {
      children: PropTypes.any.isRequired,
      factor: PropTypes.object
    }
  }
);

然后我创建另一个Component，在其中堆叠一些效果：

import GL from 'gl-react';
import React from 'react';
import PropTypes from 'prop-types';
import Negative from './effects/negative';
import Vignette from './effects/vignette';

export default GL.createComponent(
  ({children,filter}) => {
    return (
      <Vignette vignette={filter.vignette}>
        <Negative factor={filter.negative}>
          {children}
        </Negative>
      </Vignette>
    );
  },
  {
    displayName: 'ImageEffects',
    defaultProps: {
      filter: {
        vignette: 0,
        negative: 0
      }
    },
    propTypes: {
      children: PropTypes.node.isRequired,
      filter: PropTypes.object.isRequired
    }
  }
);

然后我用AnimatedSurface中的效果渲染图像：

import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {AnimatedSurface} from 'gl-react-native';
import ImageEffects from '../image-effects/index';

class BackgroundImage extends Component {
  static propTypes = {
    filter: PropTypes.object,
    src: PropTypes.string,
    width: PropTypes.number,
    height: PropTypes.number
  };

  render() {
    const {src, width, height, filter} = this.props;
    return (
      <AnimatedSurface preload width={width} height={height} backgroundColor={'transparent'}>
        <ImageEffects width={width} height={height} filter={filter}>
          {src}
        </ImageEffects>
      </AnimatedSurface>
    );
  }
}

export default BackgroundImage;

问题在于，当我堆叠更多效果时，更改Surface时AnimatedValue的性能会下降，并且JS线程被阻止。是实现这种功能的正确方法吗？还是有解决方案来避免在堆叠大量GL组件时出现性能问题？