1
내 Game of Life가 단독으로 실행될 때 몇 가지 문제가 발생합니다. 이렇게하려면 setInterval을 설정하고 누군가가 다음을 클릭 할 때마다 트리거되는 함수를 트리거하려고합니다. 그러나 그것은 나에게 많은 문제를 일으킨다.Game of life (React.js + Redux)의 성능 문제
주된 문제점은 setInterval (() => this.handleChange(), 100)을 설정하면 게임의 움직임이 느리고 마침내 codepen에서 충돌이 발생한다는 것입니다.
class Board extends React.Component{
handleChange(){ [.........] //just to indicate that here is more code that is not showing and dont think it is important to the question.
nextMovement() [...........]
render(){
var createBoard = this.props.board.map((idx) => {
return <Cell
onClick={() => this.props.toggleAlive(idx.index)}
key = {idx.index}
index = {idx.index}
col = {idx.col}
row = {idx.row}
val = {idx.val}
/>
});
return(
<div className="board">
{createBoard}
<button className="btn btn-danger" onClick={()=>this.handleChange()}>Next</button>
{setInterval(() => this.handleChange(), 100)}
</div>
);
}
}
/* - - - Reducers - - - */
여기서 전체 코드를 보려면 내 codePen을 찾을 수 있습니다.
http://codepen.io/DiazPedroAbel/pen/bwNQAJ
나는 또한 this question on stackOverFlow보고 있었다, 누가 나와 같은 문제를 갖고있는 것 같아요,하지만 결국 그는 캔버스를 사용하기 시작 그것을 해결하기 위해.
내 게임의 성능 저하가 다음 보드를 만드는 방법 때문인지 궁금합니다. 두 개의 보드가 있습니다. 실제 보드와 새로운 보드는 모두 새로운 동작을 포함하고 있습니다. 그리고 마침내이 보드를 채울 때 액션을 트리거하는 보드를 바꿉니다. 아니면 문제는 내가 setInterval 함수로 뭔가 잘못하고 있다는 것입니다.
미리 감사드립니다. 도움을 주시면 감사하겠습니다.
이유는 'this.handleChange()'가 100ms가 지나면 실행이 끝나지 않아서 시간이 지남에 따라 작업이 겹쳐 질 수 있다고 생각합니다. 나는 setInterval()을 제거하고'handleChange()'의 맨 아래에'setTimeout (this.handleChange(), 100)'을 추가하려고한다. 그래서 현재의 handleChange()가 자동으로 다음의'handleChange 실행을 마쳤습니다. –
나는 또한 React (Redux없이)를 사용하여 'Game of Life'를했습니다. 다른 참조가 필요하면 https://codepen.io/jacobgoh101/pen/LRNzjg –
큰 그림판에서 조금 느린 설정으로 setTimeOut을 설정하는 것이 좋습니다. 아마도 저는 보드를 업데이트하는 다른 방법, 아마도 셀 단위의 셀을 찾아야 할 것입니다. 고마워요. – coderHook