Javascript React渲染文本的速度慢于样式更改-警报组件

我在学习如何反应。在下面的警报组件中，我正在更新一条简单的警报消息，并将不透明度设置为1，然后通过CSS转换将其淡出。这是一个简单易用的应用程序，可以在react上升级

我遇到的问题是，当我更新警报文本

this.props.message

时，在不透明度设置为1后，在新消息替换之前，前一条消息文本会显示几秒钟。它非常快，但似乎存在竞争条件，因为DOM或React呈现的文本更改比样式更改慢。让我知道，如果有一种方法，我可以忽略打嗝和设置不透明度后，文字信息已经改变。谢谢

var TodoApp = React.createClass({
    getInitialState: function() {
        return { 
            items: [],
            alert: { message: '', success: null }
        };
    }
    genericMethod: function() {
         ...
         this.setState({ alert: { message: message, success: true } });
         ...
    },
    ...
    render: function() {
        return (
            <div>
                <Alert message={this.state.alert.message} success={this.state.alert.success} />
                <ItemInput onItemSubmit={this.addItem} />
                <ItemList items={this.state.items} deleteItem={this.deleteItem} toggleComplete={this.toggleComplete} />
            </div>
        );
    }
});

...

var Alert = React.createClass({
    delayTime: 1000,
    getInitialState: function() {
        return {
            visible: false
        };
    },
    componentWillReceiveProps: function() {
        this.setState({ visible: true }, function() {
            this.setTimer();
        });
    },
    setTimer: function() {
        setTimeout(function(argument) {
            this.setState({ visible: false });
        }.bind(this), this.delayTime);
    },
    render: function() {
        var style = {
            opacity: (this.state.visible ? 1 : 0),
            transition: 'opacity '+(this.state.visible ? 0 : this.delayTime)+'ms'
        };
        var alertClass = 'alert'+(this.props.success ? ' success' : ' error');
        return (
            <div className={alertClass} style={style}>
                {this.props.message}
            </div>
        );
    }
});

var TodoApp=React.createClass({
getInitialState:函数（）{
返回{
项目：[]，
警报：{消息：“”，成功：null}
};
}
genericMethod:function（）{
...
this.setState（{alert:{message:message，success:true}}）；
...
},
...
render:function（）{
返回(
);
}
});
...
var Alert=React.createClass({
延迟时间：1000，
getInitialState:函数（）{
返回{
可见：假
};
},
componentWillReceiveProps:function（）{
this.setState（{visible:true}，function（））{
这个.setTimer（）；
});
},
setTimer:function（）{
setTimeout（函数（参数）{
this.setState（{visible:false}）；
}.bind（这个），this.delayTime）；
},
render:function（）{
变量样式={
不透明度：（this.state.visible？1:0），
转换：“不透明度”+（this.state.visible？0:this.delayTime）+“毫秒”
};
var alertClass='alert'+（this.props.success？'success'：'error'）；
返回(
{this.props.message}
);
}
});

解决方案是从顶级Todo类中删除警报状态。因此，

{items:[]，alert:{message:''，success:null}

变成了

{items:[]}

，然后使用

）从我的Todo组件调用子警报组件上的方法，而不是在警报组件中查看
组件WillReceiveProps
。这使得我没有在每次添加或更新Todo项目时设置新消息之前过早地呈现警报组件。
这里有一个JSFIDLE：如果你不能复制你的问题，我可以尝试帮助你。我更新了FIDLE，但如果不复制整个Todo应用程序，就无法复制问题，这需要一个简单的php后端。不过，我确实缩小了范围。在我的顶层
getInitialState
中，我正在设置一个同时包含todo项和警报的对象：
{items:[]，警报：{message:''，success:null}
。通过在警报上设置断点，我可以看到在设置新消息之前更改items数组中的任何内容都会导致渲染周期处于警报状态。我将重新处理警报范围或设置警报的ajax回调。这很有帮助。谢谢