ReactDOM.render在特定情况下没有效果吗？
我有一个方法，可以在所提供的容器中呈现一个图标(字体很棒的图标)。图标渲染可以通过用户点击特定的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
回答 1
Stack Overflow用户
发布于 2017-07-06 22: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);
})https://stackoverflow.com/questions/44950890
复制相似问题
腾讯云开发者
