반응이 간단한 게임을 제작 중입니다. 나는 this example이보기 레이어만으로 반응을 사용하고, 모든 게임 로직을 자신의 외부 객체로 사용한다고 가정합니다. 그 맞습니까?외부 객체의 타이머에서 반응 구성 요소를 업데이트하십시오.
이 예에서 게임은 사용자가 화면을 클릭하면 업데이트됩니다. 따라서 항상 게임에 대한 업데이트를 트리거하는 반응 요소 자체와 상호 작용합니다. 내 예제에서, 게임은 또한 타이머에 기반하여 업데이트 될 수 있습니다 (나는 반응 객체가 아닌 게임 객체 자체 내에서 살아야한다고 생각합니다).
내 질문은, 내 게임 개체 내에서 외부 타이머가 작동 할 때마다 반응 구성 요소를 어떻게 업데이트해야합니까?
아래 코드는 보드 게임을 업데이트하기 위해 해당 함수를 호출 할 수있는 자식 구성 요소에 this.onBoardUpdate.bind(this)을 전달하여 게임에 연결된 상태의 보드 게임을 처리하는 방법을 보여줍니다.
var ContainerView = React.createClass({
getInitialState: function() {
return {'board': this.props.board};
},
onBoardUpdate: function() {
this.setState({"board": this.props.board});
},
render: function() {
return (
<div>
<AlertView board={this.state.board} />
<PassView board={this.state.board} />
<BoardView board={this.state.board}
onPlay={this.onBoardUpdate.bind(this)} />
</div>
)
}
});
var board = new Board(19);
React.renderComponent(
<ContainerView board={board} />,
document.getElementById('main')
);
그래서, 내 '갱신 타이머'문제에 대한, 내가 생각할 수있는 솔루션은 다음과 같습니다
가는) 게임 객체에 살고 타이머를 가지고 있고, 단지 각 전체 구성 요소를 다시 렌더링 tick
b) 게임 개체를 게임 개체에 저장하십시오. 게임이 반응 요소 자체를 업데이트 할 수 있도록 어떤 시점에서 반응 요소의 함수를 다시 게임 객체로 전달합니다 (위 예제와 같이 약간 this.onBoardUpdate.bind(this) 전달).
c) 반응 구성 요소에 타이머가 있고 타이머가 게임 개체의 tick 함수를 호출 한 다음 자신의 상태를 업데이트합니다. 즉, 게임 객체 자체가 tick 인 방법을 알지만,을 tick으로했을 때 을 알 수 없음을 의미합니다.
이 중 아무 것도 나에게 매우 깔끔하게 보이지 않습니다. 어느 것이 가장 좋습니까? 아니면 더 좋은 방법이 있습니까? this.setState({"board": this.props.board}); :
는 마지막으로, 위의 예에서, 어떻게 든 onBoardUpdate 방법은 단순히 구성 요소 소품의 내 board의 값으로 구성 요소의 상태에서 board를 설정하는 것을 재미 보인다. 이것은 정상적인 패턴입니까?
그것은 게임 오브젝트에 살고 타이머를 가지고 아마 최고