class方法调用冻结UI

Question

我目前正在尝试解决在我的应用程序中某个页面上冻结我的UI的问题。我已经将问题跟踪到我的类方法handleRequire，该方法基本上调用了3个动作创建者，每个人都进行一些计算，然后调用api来获取正确的数据。

我100％确定UI frezze不是因为组件中不需要的重新渲染或调用选择器（测试了此页面上使用的所有组件）。

你在下面看到的是问题，即我选择了一个很长的时期，但是UI冻结了，而且日期选择器也没有被隐藏（正常情况下）。

问题

请注意，控制台中会打印以下警告：[Violation] 'click' handler took 1414ms。此click处理程序位于datepicker组件上，用于处理下拉列表的可见性。

网页课程(full component gist)

class Overview extends PureComponent {
    constructor(props) {
        super(props);

        this.handleRequire = this.handleRequire.bind(this);
    }

    componentDidMount() {
        this.handleRequire();
    }

    handleRequire() {
        const { requireAccountDayStats, requireQuestions, requireQuestionsDayStats } = this.props;

        requireQuestions()
            .then(() => requireAccountDayStats())
            .then(() => requireQuestionsDayStats());
    }

    render() {
        return (
            <div>
                <DatePicker onChange={this.handleRequire} />
                // ... stuff
            </div>
        );
    }
}

DatePicker调用(full gist)

handleChange(...) {
    // ... stuff

    this.setState(
        { 
            // stuff 
        },
        () => onChange(newValue)) // Is this the issue as it might wait for the onChange function to be fully finished before re-rendering?
    );
}

requireAccountDayStats() requireQuestionsDayStats()

问题

我想我的问题是如何在不干扰用户界面的情况下运行handleRequire()类方法？