性能缓慢，在反应中使用 p5答案

【问题标题】：Slow performance, using p5 in react性能缓慢，在反应中使用 p5
【发布时间】：2017-12-26 19:40:29
【问题描述】：

我正在尝试在 react 应用程序中使用 p5 (https://p5js.org/) 并且某些草图的性能非常糟糕（在开发中与构建应用程序后相同）。我使用create-react-app 作为项目脚手架，没有对构建设置进行任何更改。

直接在浏览器中运行草图时，它们的运行速度约为 50-60fps，但加载到 react 时，它们会下降到大约 1-2fps。

我将草图与这样的反应联系起来：

// 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"/>

什么可能导致减速？

【问题讨论】：

我编辑了代码以便它运行。由于我没有看到任何减速，我将尺寸更改为 1024*768 以更接近全屏。
您的代码根本没有使用 React 来运行生活模拟游戏。您只需制作一个画布。
这不是由于您的代码或库本身的错误，而是您的浏览器。当我在浏览器中运行您的代码 sn-p 时，它运行顺利。我什至检查了每秒帧数，并达到了稳定的 100+ fps。尝试使用其他浏览器进行调试。
行话注意：“p5”实际上是基于 java 的语言 Processing 的昵称。 p5.js 项目和库被称为 p5js 以明确表示它是 JS 的，而不是 Java 的。
另外，如果你告诉 React 它不应该尝试管理画布元素，通过使用 shouldComponentUpdate 函数，设置为返回 false，你可能会得到更好的结果。

标签： javascript performance reactjs create-react-app p5.js

【解决方案1】：

这似乎是由于RAM的可用内存不足造成的，当有足够的可用内存时它会顺利运行。但是当内存较少时，P5.js 会以低帧速率运行。

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

提升内存或在另一台机器上运行

RAM 中的内存可用性低

【讨论】：