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

Stack Overflow用户

提问于 2017-07-06 13:50:58

回答 1查看 78关注 0票数 1

我有一个方法，可以在所提供的容器中呈现一个图标(字体很棒的图标)。图标渲染可以通过用户点击特定的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

reactjs

rendering

javascript

html

回答 1

Stack Overflow用户

发布于 2017-07-06 14:14:09

看起来使用ReactDOM.render一切都没问题。但是我对渲染发生得太快的猜测是对的。而是来自另一个地方。

有一个函数(我没有提到过)可以清除所有渲染的图标。在游戏开始后，它会变得清晰。当玩家在玩的时候，那是没有问题的，因为清除确实发生在用户点击div之后。但是当cpu这样做时，它的速度要快得多，所以在调用clears之前，它会先执行该操作，然后清除那个移动图标。

因此，从技术上讲，它是渲染的，但它会立即被移除，看起来就像从未渲染过一样，至少对我们人类来说是这样：)

因此，修复方法是将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);

})