Question

我有一个网站，我在其中发布使用p5js制作的p5 /处理/视觉草图。我是从头开始制作网站的，它有点过时了，更新起来很麻烦。所以我想我会为网站脚手架试用ReactJS（具体来说是NextJS）。直到我注意到通过ReactJS加载p5草图时，它的运行速度都很慢，一切似乎都可以正常工作。我真的不明白为什么，因为两个框架是独立的。就p5而言，代码是相同的。在React之外，它们的运行速度约为60 fps，而React的运行速度约为1-10 fps。

我首先使用P5Wrapper开始了该项目，但最终切换到了

之类的修改版本。

import React from 'react'
import p5 from 'p5'

export default class P5Container extends React.Component 
{
    componentDidMount() 
    {
        this.canvas = new p5(this.props.sketch, this.wrapper)
        if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) 
        {
            this.canvas.myCustomRedrawAccordingToNewPropsHandler(this.props)
        }
    }

    componentWillReceiveProps(newprops) 
    {
        if(this.props.sketch !== newprops.sketch)
        {
            this.canvas.remove()
            this.canvas = new p5(newprops.sketch, this.wrapper)
        }
        if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) 
        {
            this.canvas.myCustomRedrawAccordingToNewPropsHandler(newprops)
        }
    }

    componentWillUnmount() 
    {
        this.canvas.remove()
    }

    render() 
    {
        return <div ref={wrapper => this.wrapper = wrapper}></div>
    }
}

和这样的用法：

<P5Container sketch={sketch} params={this.props.query} />

我还在这里找到了一篇描述该过程的文章：Medium，但这并不能解决问题。

我还发现了关于同一件事的更老的问题：here和here，但都没有得到回答/解决。

关于React框架的工作是否会导致渲染变慢？也许p5的加载方式会导致速度降低？有任何想法吗？请暂停！

在反应中运行p5时性能降低

0 个答案: