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

Question

我有一个方法可以在提供的容器内呈现一个图标(字体很棒的图标)。图标渲染可以通过用户单击特定 div 或程序本身在模仿用户单击特定 div 时自动调用渲染函数来进行。

为了更好地理解这一点。我创建了这个所谓的 TicTacToe 游戏。可以玩玩家对玩家或玩家对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>`;

然后它就可以很好地渲染任何图标。无论游戏是玩家 vs 玩家、cpu vs 玩家、玩家 vs cpu 甚至 cpu vs cpu (在这种情况下，所有图标都会立即渲染，因为最终结果始终是绘制的)。

ReactDOM.render 有一些问题吗？

附注如果你有兴趣，你可以在这里找到完整的代码(目前它可以玩cpu vs player，这意味着首先会玩CPU。而且因为它是使用ReactDOM.render渲染的code>，第一步将是不可见的。其他应该看起来很好):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);

})