在外部对象的定时器上更新反应组件

Question

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

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

我的问题是，每次触发外部计时器（在我的游戏对象中）时，我应该如何更新 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')
);

所以，对于我的'update on timer'问题，我能想到的解决方案是：

a) 让计时器存在于游戏对象中，并在每次更新时重新渲染整个组件

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

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

None 这些对我来说似乎非常整洁。哪个最好？或者有更好的方法吗？

最后，在上面的示例中，onBoardUpdate 方法只是将组件状态中的 board 设置为组件属性中 board 的值，这在某种程度上似乎很有趣：this.setState({"board": this.props.board});。这是正常模式吗？

（如果你没猜到，我是全新的反应！）

Answer 1

最好让计时器存在于游戏对象中，并拥有它 "re-render the whole component on each tick."React 的最大好处是您只需告诉它要渲染什么，它决定了最少的更改次数它需要达到 DOM 才能达到这一点。因此，重新渲染非常快。你的 React 组件应该关心如何呈现给定特定 this.state 和 this.props 的视图，而不是当它们发生变化时如何更新。

就是说，如果这里只有一个组件受计时器影响（例如 PassView），那么您可能希望它处于 "own" 计时器状态，而不是 ContainerView 组件。

在外部对象的定时器上更新反应组件

Update react component on Timer in external object

reactjs