Question

我正在建立一个简单的游戏。我假设this example在使用react作为视图层时是正确的，并将所有游戏逻辑放在它自己的外部对象中。这是对的吗？

在该示例中，游戏仅通过用户点击屏幕进行更新 - 因此，它始终与反应组件本身进行交互，从而触发对游戏的更新。在我的例子中，游戏也可以根据计时器进行更新（我认为它应该存在于游戏对象本身内，而不是反应组件中。）

我的问题是，每当外部计时器（在我的游戏对象中）触发时，我应该如何更新反应组件？

下面的代码演示了我链接的棋盘游戏示例如何处理游戏状态的更新 - 基本上，通过将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')
);

因此，对于我在计时器上的更新＆＃39;问题，我能想到的解决方案是：

a）让计时器存在于游戏对象中，并在每个刻度上重新渲染整个组件

b）让计时器存在于游戏对象中。在某些时候，将一个函数从react组件传递回游戏对象，（有点像上面的示例，它传递this.onBoardUpdate.bind(this)），以便游戏可以更新反应组件本身。

c）让计时器存在于react组件中，并且计时器调用游戏对象上的tick函数，然后更新它自己的状态。这意味着游戏对象本身将知道如何tick，但到tick时不知道。

这些对我来说似乎都不是很整洁。哪个最好？或者有更好的方法吗？

最后，在上面的示例中，onBoardUpdate方法只是将组件状态中的board设置为组件prop＆board中的this.setState({"board": this.props.board});值。＃39; s：{{1}}。这是正常模式吗？

（如果您没有猜到，我会做出新的反应！）

Answer 1

最好让计时器存在于游戏对象中，然后让它在每个刻度线上重新渲染整个组件。＆＃34; React的最大好处是你只需要告诉它要呈现什么，它确定了它需要对DOM进行的最小化更改数量才能达到这一点。因此，重新渲染非常快。您的React组件应该关注如何呈现特定this.state和this.props的视图，而不是更改时如何更新。

那就是说，如果这里只有一个组件受到计时器的影响（比如说PassView），那么你可能希望它能够拥有＆＃34;拥有＆＃34;计时器状态，而不是ContainerView组件。

更新外部对象中Timer的响应组件

1 个答案: