性能缓慢，在React中使用p5

Question

我正在尝试在一个React应用程序中使用 p5 (https://p5js.org/)，但一些草图的性能非常差（包括开发和构建后的应用程序）。项目骨架是使用create-react-app创建的，没有进行任何构建设置更改。

当直接在浏览器中运行草图时，它们运行大约50-60帧每秒，但当加载到React中时，帧率降至1-2帧每秒。

我是通过以下方式将草绘与React连接的：

// React Component to interface the sketches
class P5Wrapper extends React.Component {

  componentDidMount() {
    const { sketch, ...rest } = this.props;
    this.canvas = new p5(sketch(rest), this.wrapper);
  }

  componentWillReceiveProps(newProps) {
    const { sketch, ...rest } = newProps;

    if (this.props.sketch !== newProps.sketch) {
      this.canvas.remove();
      this.canvas = new p5(newProps.sketch(rest), this.wrapper);
    }

    if (typeof this.canvas.onNewProps === "function") {
      this.canvas.onNewProps(newProps);
    }
  }

  componentWillUnmount() {
    this.canvas.remove();
  }

  render() {
    return <div ref={(wrapper) => this.wrapper = wrapper} />;
  }
}

// you can watch the sketch in action here (https://p5js.org/examples/simulate-game-of-life.html)
const gameOfLife = (props) => (p) => {
  let w;
  let columns;
  let rows;
  let board;
  let next;

  p.setup = () => {
    p.createCanvas(1024, 768);
    p.background(255);
    p.noStroke();
    w = 20;

    columns = p.floor(p.width / w);
    rows = p.floor(p.height / w);

    board = new Array(columns);
    for (let i = 0; i < columns; i++) {
      board[i] = new Array(rows);
    }

    next = new Array(columns);
    for (let i = 0; i < columns; i++) {
      next[i] = new Array(rows);
    }
    init();
  };

  p.draw = () => {
    generate();
    for (let i = 0; i < columns; i++) {
      for (let j = 0; j < rows; j++) {
        if ((board[i][j] === 1)) p.fill(0);
        else p.fill(255);
        p.rect(i * w, j * w, w - 1, w - 1);
      }
    }
  };

  p.mousePressed = () => {
    init();
  };

  const init = () => {
    for (let i = 0; i < columns; i++) {
      for (let j = 0; j < rows; j++) {
        if (i === 0 || j === 0 || i === columns - 1 || j === rows - 1) board[i][j] = 0;
        else board[i][j] = p.floor(p.random(2));
        next[i][j] = 0;
      }
    }
  };

  const generate = () => {
    for (let x = 1; x < columns - 1; x++) {
      for (let y = 1; y < rows - 1; y++) {
        let neighbors = 0;
        for (let i = -1; i <= 1; i++) {
          for (let j = -1; j <= 1; j++) {
            neighbors += board[x + i][y + j];
          }
        }
        neighbors -= board[x][y];
        if ((board[x][y] === 1) && (neighbors < 2)) next[x][y] = 0;
        else if ((board[x][y] === 1) && (neighbors > 3)) next[x][y] = 0;
        else if ((board[x][y] === 0) && (neighbors === 3)) next[x][y] = 1;
        else next[x][y] = board[x][y];
      }
    }
    const temp = board;
    board = next;
    next = temp;
  };
};

// render the wrapper and the sketch
ReactDOM.render(<P5Wrapper sketch={gameOfLife} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<div id="root"/>

是什么导致了这种减速？

- au.re

---

我编辑了代码，使其运行。由于我没有看到任何减速，我将大小更改为1024*768，以更接近全屏。 - Rikku

你的代码完全没有利用React来运行生命游戏模拟。你只是创建了一个画布（canvas）。 - Andy Ray

这并不是由于你的代码或库本身的问题，而是由于你的浏览器。当我在我的浏览器中运行你的代码片段时，它运行得很顺畅。我甚至检查了每秒帧数，实现了稳定的100+ fps。尝试使用另一个浏览器进行调试。 - user3996942

术语说明： "p5"实际上是Processing的昵称，它是基于Java的语言。 p5.js项目和库被称为p5js，以明确它是JS版本，而不是Java版本。 - Mike 'Pomax' Kamermans

此外，如果您告诉React不要尝试管理那个画布元素，使用shouldComponentUpdate函数设置为返回false，您可能会获得更好的结果。 - Mike 'Pomax' Kamermans

Answer 1

这似乎是由于RAM内存不足引起的，当有足够的内存可用时，它将平稳运行。但是当内存不足时，P5.js的帧速率会很低。

简要说明 我认为在使用node运行react应用程序时，肯定会占用大量RAM。尤其是当我们使用4GB或更少的RAM配置通过node运行react时，我们可能会导致P5.js或任何图形内容以非常低的每秒帧数运行。

提高RAM或在另一台机器上运行

RAM内存不足

- Nandha Frost