Javascript P5以60 FPS的速度进行反应

为了让P5与React一起工作，我使用了import

我得到了一个简单的动画工作在我的瓷砖，但性能是一个问题。动画在512个“星形”对象处变慢为爬行，因此我将其缩小到128。然而，即使是128帧，FPS似乎也太低，平均低于30帧。我正在寻找方法来提高P5在React中的性能，以便动画可以以接近60 FPS的速度运行

P5代码：

function sketch (p) {

  const star = () => {
    const x = p.random(-TILE_SIZE/2, TILE_SIZE/2)
    const y = p.random(-TILE_SIZE/2, TILE_SIZE/2)
    const z = p.random(TILE_SIZE)
    return { x, y, z }
  }

  const stars = new Array(128)

  p.setup = () => {
    p.createCanvas(TILE_SIZE, TILE_SIZE)

    for (let i = 0; i < stars.length; i++) {
      stars[i] = star()
    }
  }

  const update = (coord) => {
    const { z } = coord
    let newZ = z - 8
    if (newZ < 1) {
      newZ = p.random(TILE_SIZE)
    }
    return { ...coord, z: newZ }
  }

  const show = (coord) => {
    const { x, y, z } = coord
    p.fill(255)
    p.noStroke()

    const sx = p.map(x / z, 0, 1, 0, TILE_SIZE)
    const sy = p.map(y / z, 0, 1, 0, TILE_SIZE)

    const r = p.map(z, 0, TILE_SIZE, 4, 0)
    p.ellipse(sx, sy, r, r)
  }

  p.draw = () => {
    p.background(0)
    p.translate(TILE_SIZE/2, TILE_SIZE/2)
    for (let i = 0; i < stars.length; i++) {
      stars[i] = update(stars[i])
      show(stars[i])
    }
  }
}

功能草图（p）{
常数星=（）=>{
常数x=p.random（-TILE\u SIZE/2，TILE\u SIZE/2）
常数y=p.random（-TILE\u SIZE/2，TILE\u SIZE/2）
常数z=p.random（瓷砖尺寸）
返回{x，y，z}
}
常数星=新阵列（128）
p、 设置=（）=>{
p、 createCanvas（平铺大小、平铺大小）
for（设i=0；i{
常数{z}=coord
设newZ=z-8
if（newZ<1）{
newZ=p.random（瓷砖尺寸）
}
return{…coord，z:newZ}
}
常数显示=（坐标）=>{
常数{x，y，z}=coord
p、 填充（255）
p、 noStroke（）
常数sx=p.map（x/z，0，1，0，瓷砖大小）
常数sy=p.map（y/z，0，1，0，瓷砖大小）
常数r=p.map（z，0，TILE_大小，4，0）
p、 椭圆（sx，sy，r，r）
}
p、 绘图=（）=>{
p、 背景（0）
p、 翻译（平铺尺寸/2，平铺尺寸/2）
for（设i=0；i

如何使用包装器：

import P5Wrapper from 'react-p5-wrapper'

...
render (
 <ItemContainer key={uuidv4()}>
   <header>
     {name}
     <p>{description}</p>
   </header>
   <P5Wrapper sketch={sketch} />
 </ItemContainer>
)

从“react-p5-wrapper”导入p5包装器
...
渲染(
{name}
{说明}

)

starfield瓷砖的实际外观（2块瓷砖）

---

我计划根据性能添加更多动画。或者切换到SVG。

在不改变实际动画逻辑的情况下解决了帧速率问题。仍然需要进行大量的性能优化

我注意到，当我卸载和重新装载组件时，动画会逐渐变慢。深入研究Github问题会导致这篇关于的文章。海报提供了一个从未合并的PR和commit，并且存储库已经一年多没有更新

相反，最好删除该软件包，并在海报更新后创建自己的组件：

import React from 'react'
import p5 from 'p5'

export default class P5Wrapper 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>
  }
}

从“React”导入React
从“p5”导入p5
导出默认类P5Wrapper扩展React.Component{
componentDidMount（）{
this.canvas=new p5（this.props.sketch，this.wrapper）
if（this.canvas.myCustomRedrawingOneWPropshandler）{
this.canvas.myCustomRedrawingOneWPropshandler（this.props）
}
}
组件将接收道具（新道具）{
if（this.props.sketch！==newprops.sketch）{
this.canvas.remove（）
this.canvas=newp5（newprops.sketch，this.wrapper）
}
if（this.canvas.myCustomRedrawingOneWPropshandler）{
this.canvas.myCustomRedrawingOneWPropshandler（newprops）
}
}
组件将卸载（）{
this.canvas.remove（）
}
render（）{
返回this.wrapper=wrapper}>
}
}

这至少解决了安装和卸载组件的性能下降问题。此外，我的帧数从30帧以下跳到了近60帧。这可能是因为我还导入了最新的P5包，因为我不再依赖react-P5-wrapper进行导入

---

在不更改实际动画逻辑的情况下解决了帧速率问题。仍然需要进行大量的性能优化

我注意到，当我卸载和重新装载组件时，动画会逐渐变慢。深入研究Github问题会导致这篇关于的文章。海报提供了一个从未合并的PR和commit，并且存储库已经一年多没有更新

相反，最好删除该软件包，并在海报更新后创建自己的组件：

import React from 'react'
import p5 from 'p5'

export default class P5Wrapper 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>
  }
}

从“React”导入React
从“p5”导入p5
导出默认类P5Wrapper扩展React.Component{
componentDidMount（）{
this.canvas=new p5（this.props.sketch，this.wrapper）
if（this.canvas.myCustomRedrawingOneWPropshandler）{
this.canvas.myCustomRedrawingOneWPropshandler（this.props）
}
}
组件将接收道具（新道具）{
if（this.props.sketch！==newprops.sketch）{
this.canvas.remove（）
this.canvas=newp5（newprops.sketch，this.wrapper）
}
if（this.canvas.myCustomRedrawingOneWPropshandler）{
this.canvas.myCustomRedrawingOneWPropshandler（newprops）
}
}
组件将卸载（）{
this.canvas.remove（）
}
render（）{
返回this.wrapper=wrapper}>
}
}

这至少解决了安装和卸载组件的性能下降问题。此外，我的帧数从30帧以下跳到了近60帧。这可能是因为我还导入了最新的P5包，因为我不再依赖react-P5-wrapper进行导入

---

您在这方面做了更多的工作吗？我切换到您的P5Wrapper版本，但它仍然比单机版运行慢得多（没有react）。到目前为止我喜欢react，但这对我来说是个拦路虎。请停下来！不，对不起。这是我停下来的地方，不用担心。糟糕，因为react很不错，我喜欢p5。如果你不介意我问的话，你最终为你的项目做了什么？切换到SVG？我只是想测试不同的技术和库。我并没有深入研究每一项技术，但希望能在基本层面上尝试每一项新技术。下一个应该是a型架或类似的。你在这方面做了更多的工作吗？我切换到您的P5Wrapper版本，但它仍然比单机版运行慢得多（没有react）。到目前为止我喜欢react，但这对我来说是个拦路虎。请停下来！不，对不起。这是我停下来的地方，不用担心。糟糕，因为react很不错，我喜欢p5。如果你这样做了，你最终会为你的项目做什么