Android 使用带多段线的requestAnimationFrame反应本机路径渲染减慢

我正在安装一个心脏监护仪，就像视频中的蓝线一样。我正在使用多段线和requestAnimationFrame。从长度为0的多段线开始，每帧向处于状态的多段线添加另一个点，并触发重新渲染。动画以snappy和smooth开始，但随着多段线长度的增加，它会变得越来越慢

我尝试过限制帧速率，我用一些非常简单的东西取代了波形计算，但它仍然会变慢。我不确定，但我认为这是因为它每次都会重新渲染整个多段线-随着多段线变大，渲染时间也会变长。我正在安卓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>);
}

componentDidMount（）{
这是1.fps=30；
this.then=Date.now（）；
this.interval=1000/this.fps；
此._frameId=requestAnimationFrame（（）=>{
这个.renderFrame（）；
});
}
renderFrame（）{
常数步长=5；
x=这个。x+步长；
此.arrIndex+=步长；
y=该波形（该指数）；
if（x

监视器应该以相同的速率平滑渲染每个过程，但在开始时速度要快得多，并且在继续进行时会逐渐变慢