在反应中使用p5会降低性能 [英] Slow performance, using p5 in react
问题描述
我正在尝试在React应用程序中使用p5( https://p5js.org/)和某些草图的性能确实很差(开发中与构建应用程序后相同).我将create-react-app用于项目支架，而未对构建设置进行任何更改.
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.
直接在浏览器中运行时，草图的运行速度约为50-60fps，但是当加载到反应中时，它们的运行速度将降至1-2fps.
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?
推荐答案
这似乎是由于RAM的内存不足所致，当有足够的可用内存时它将平稳运行.但是，当内存不足时，P5.js将以低帧速率运行.
This seems to be caused due to low memory availability of RAM, it will runs smoothly when there sufficient memory available. But when there is less memory P5.js is running at low frame rate.
简要说明 我相信，当我们运行带有节点的应用程序时，肯定可以容纳大量的RAM. 尤其是当我们使用4GB或更少的RAM配置对节点进行反应时，最终可能会以每秒极低的帧数运行P5.js或任何图形内容.
Brief explanation I believe while we run react applications with node, surely it could hold a huge amount of RAM. Especially when we run react with node using 4GB or less RAM configuration, we could end up P5.js or any graphic content running in very low Frames per seconds.
提升RAM或在另一台机器上运行
uplift the RAM or run in another machine
RAM中的内存不足
Low memory availability in RAM
这篇关于在反应中使用p5会降低性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
