Question

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

我遇到的问题是，在新消息替换之前，我将更新警报文本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>
        );
    }
});

Answer 1

解决方案是从顶级Todo类中删除警报状态。因此，{ items: [ ], alert: { message: '', success: null } }变为{ items: [ ] }，然后使用<Alert ref="alert" />和this.refs['alert'].triggerAlert(message, true);从我的Todo组件调用子警报组件上的方法（如此回答{{3}中所示而不是在Alert组件中查看componentWillReceiveProps。这使得我不会在每次添加或更新Todo项目时设置新消息之前过早地呈现Alert组件。

React渲染文本比样式更改慢 - 警报组件

1 个答案: