使用带有折线的requestAnimationFrame进行React-Native路径渲染的速度变慢

Question

我正在安装像this视频中的蓝线那样的心脏监护仪。我正在使用折线和 requestAnimationFrame 。从长度为0的折线开始，每一帧都会在状态下向折线添加另一个点并触发重新渲染。动画开始时会流畅流畅，但是随着折线长度的增加，动画会越来越慢。

我尝试限制帧速率，并用非常简单的方法替换了波形计算，但它仍然变慢了。我不确定，但是我认为这是因为它每次都会重新渲染整个折线-随着折线变大，渲染会花费更长的时间。我正在Android Nexus平板电脑上运行此组件。

componentDidMount() {    
    this.fps = 30;
    this.then = Date.now();
    this.interval = 1000 / this.fps;
    this._frameId = requestAnimationFrame(() => {
        this.renderFrame();
    });
}

renderFrame() {
    const stepsize = 5;
    x = this.x + stepsize;
    this.arrIndex += stepsize;
    y = this._waveform(this.arrIndex);

    if (x < this.state.dimensions.width) {
        this.x = x;
        this.y = y;
        var newPoint = x + "," + y + " "
        this.path += newPoint
        this.setState({path:this.path});
    } else {
        this.x = 0;
        this.y = 50;
        this.path = ""
    }
    this._frameId = requestAnimationFrame(this.renderFrame);
}

render() {
    return (
        <View style={{ flex: 1, alignSelf: 'stretch' }} onLayout={this.onLayout} >
        <Svg height={this.state.dimensions.height} width={this.state.dimensions.width}>
        <Polyline points={this.state.path}
            fill="none"
            stroke="green"
            strokeWidth="1"/>
        <Rect x={this.x -5} width="10" height={this.state.dimensions.height} fill="#1c2321"/>
        </Svg>
        </View>);
}

每次通过时，监视器应该以相同的速率平滑地渲染，但是在开始时它要快得多，并且随着它的进行而逐渐变慢。