Slow performance, using p5 in react

问题

I am trying to use p5 (https://p5js.org/) in a react application and the performance of some sketches is really bad (same in development as after building the app). I'm using create-react-app for the project scaffold, without any changes to the build setup.

The sketches run around 50-60fps when running them directly in the browser, but when loaded into react they drops to about 1-2fps.

I am connecting the sketches with react like this:

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

What could be causing the slowdown?

来源：https://stackoverflow.com/questions/47983010/slow-performance-using-p5-in-react