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？

P.S.如果你有兴趣，你可以在这里找到完整的代码（目前它可以播放cpu vs player，这意味着首先播放CPU，并且由于它是用ReactDOM.render呈现，所以第一个动作将是隐形的，其他人应该显得很好）：https://codepen.io/andriusl/pen/qjyBdB

Answer 1

看起来像ReactDOM.render一切正常。但是我猜猜渲染发生得太快，这种说法是正确的。但从另一个地方。

有一个函数（我没有提到的问题）清除所有呈现的图标。游戏开始后就会清楚。当玩家正在玩时，则没有问题，因为结算会在稍后发生，用户点击div。但是，当CPU执行该操作时，它的速度会更快，因此它在调用清除之前轮到它，并清除该移动图标。

所以技术上呈现，但它会立即删除，看上去就像它从来没有显示，至少对我们人类:)

所以修复是tic.start前搬迁ReactDOM.unmountComponentAtNode。然后它在开始比赛之前总是清除，而不是在之后（或在开始另一场比赛之前）清除。

$('#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); 

})