Question

我有一个方法可以在提供的容器中呈现一个图标（font-awesome图标）。图标渲染可以通过用户点击特定div或程序本身在模仿用户点击特定div时自动调用渲染功能来实现。

为了更好地理解这一点。我创造了这个所谓的TicTacToe游戏。可以播放player vs player或player vs cpu。如果两个玩家正在玩，那么没有问题，一切都很好。

现在当玩家对抗CPU时，会发生一些奇怪的事情。如果第一个玩家是CPU，则不会渲染其第一个移动（图标不会出现）。但其余的看起来很好。

如果我让两个玩家都是CPU（CPU与另一个CPU对战），那么什么都不会被渲染。可能是ReactDOM.render如果发生太快会忽略变化吗？;）

所以这是程序（游戏）的一部分：

$( document ).ready(function() {
    const ICONS_CLASSES = {
        x: 'fa fa-times fa-lg',
        o: 'fa fa-circle-o fa-5x'
    }
    function renderMove(el, turn){
        const classes = ICONS_CLASSES[turn];
        ReactDOM.render(
             React.createElement('span', {'className': classes}),
             el
         )
    }
...
...
});

这里还有一个函数，由程序自己调用来模仿点击游戏中的特定div（好吧让CPU“点击”它）：

function clickPosition(el, tic){
    if(tic.state == 'running'){
        // Save which player played, because after playing move, it will
        // switch turn for another player.
        const type = tic.turn.type;
        const res = tic.play(el.id);
        if(res != 'invalid')
            renderMove(el, type);
        updateInfo(tic.info)
        // Add start block to be able to play again.
        if(tic.state == 'stopped'){
            // Highlight win combo if there is any
            if(tic.winCombo)
                highlightWin(tic.winCombo)
            toggleEl($('#start'))
        }

    }
}

因此，如前所述调用此类渲染将不会一直呈现（在使用CPU时）。

但如果我将渲染更改为：

el.innerHTML = `<span class="${classes}"></span>`;

然后它渲染任何图标就好了。无论游戏是玩player vs player，cpu vs player，player vs cpu还是cpu vs cpu（在这种情况下，所有图标都会立即渲染，因为最终结果总是在绘制）。< / p>

ReactDOM.render有什么问题吗？

P.S。如果你有兴趣，你可以在这里找到完整的代码（目前它已启用cpu vs player，这意味着首先会播放CPU。而且因为它是用ReactDOM.render渲染的，所以首先移动将是不可见的。应该看起来很好）：https://codepen.io/andriusl/pen/qjyBdB

Answer 1

ReactDOM.render看起来一切正常。但我猜对渲染发生的速度太快了。但是从另一个地方来。

有一个功能（我还没有提到过），它清除了所有渲染的图标。在开始游戏后它会清除。当玩家正在玩时，则没有问题，因为清算确实发生在用户点击div之后。但是当cpu这样做时，它的速度要快得多，所以在调用清理之前它会轮到它并清除那个移动图标。

从技术上来说它是渲染的，但它会被立即移除，看起来像是从未渲染过，至少对我们人类而言：）

因此，修复是在ReactDOM.unmountComponentAtNode之前移动tic.start。然后它总是在开始游戏之前清除，而不是在开始另一个游戏之后（或在开始另一个游戏之前）。

$('#x, #o').on('click', function() {
    const second = {'x': 'o', 'o': 'x'};
    // Clear filled positions if any.
    let positions = document.getElementsByClassName('pos');
    _.each(positions, pos => {
        ReactDOM.unmountComponentAtNode(pos);
    })
    tic.start(this.id, second[this.id]);
    toggleEl($('#start'));
    updateInfo(tic.info);

})

ReactDOM.render在特定情况下没有效果？

1 个答案: