ReactDOM.render 在具体情况下没有效果？

Question

我有一个方法可以在提供的容器内呈现一个图标（字体真棒图标）。图标渲染可以通过用户点击特定的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 玩游戏（在这种情况下，所有图标都会立即呈现，因为最终结果总是绘制）。

ReactDOM.render 有什么问题吗？

附：有兴趣的可以看下完整代码（目前开启播放cpu vs player，意思是先播放CPU。因为是用ReactDOM.render渲染的，所以看不到first move。其他应该没问题） ：https://codepen.io/andriusl/pen/qjyBdB

Answer 1

看起来ReactDOM.render 一切正常。但我对渲染发生得太快的猜测是正确的。但来自另一个地方。

有一个功能（我没有在问题中提到）清除所有呈现的图标。并且在开始游戏后就会清除。当玩家在玩时，没有问题，因为清除确实发生在用户点击div之后。但是当 cpu 这样做时，它会更快，所以它会在调用 clearing up 之前轮到它，它会清除那个移动图标。

所以从技术上讲它是渲染的，但它会立即被移除，看起来它从未被渲染过，至少对我们人类来说：)

所以解决方法是将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);

})