在 React/Flux 应用程序中，延迟操作超时属于哪里？答案

【问题标题】：In a React/Flux app, where does a delayed action timeout belong?在 React/Flux 应用程序中，延迟操作超时属于哪里？
【发布时间】：2015-08-20 20:01:45
【问题描述】：

我不确定这个问题是属于程序员还是 SO，如果我选择不明智，请原谅我。

这是我的第一个 React/Flux 应用，所以我还在学习中。

我有一个带有文本输入组件的应用程序。我不想在每次用户在输入中键入字符时传播更改（出于性能原因）。因此，在输入的onChange 处理程序中，我将组件的状态设置为具有新值，检查超时是否已经排队（如果是，请清除它），然后启动一个新的 500 毫秒超时来调用更改-更新商店的价值操作。

import React from 'react';
import { Input } from 'react-bootstrap';

import TableStore from '../stores/table-store';
import TableActions from '../actions/table-actions';

export default class TableEditorDescription extends React.Component {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);

        this.state = {
            description: TableStore.getLoadedTable().description
        };
    }

    handleChange(e) {
        let description = e.target.value; // new value of the input
        this.setState({
            description: description
        });

        if (this._timeout) {
            clearTimeout(this._timeout);
        }

        this._timeout = setTimeout(function() {
            TableActions.setLoadedTableDesc(description);
        }, 500);
    }

    render() {
        return <Input ref='desc'
                    {...this.props}
                    type='textarea'
                    placeholder='description'
                    value={this.state.description}
                    onChange={this.handleChange} />;
    }
}

但是，如果没有待保存的更改，我的保存按钮（同级组件）将被禁用，并在进行更改时亮起。在我当前的代码中，由于操作被延迟，因此按钮在用户停止输入半秒后才会启用。更令人担忧的是，由于动作要等待半秒才能生效，如果保存按钮已经启用并且用户在半秒内点击它，则会保存错误的值——用户开始输入之前输入的值.

所以我的下一个想法是调用两个动作——延迟的一个，一个最终导致发出不同事件的动作，例如'queuedChange'，唯一监听它的组件是按钮。然后，当单击按钮时，保存操作将等待其他操作发生，或者商店人为地启动它并告诉输入清除其超时或其他东西。

然后我认为这种延迟的正确位置可能是商店，因此商店会为每个应该延迟的操作保持超时（知道是延迟还是立即做出更改）一个动作参数）。

有做过类似事情的人有一些事后的建议吗？

【问题讨论】：

老实说，React 真的很快。每次按下键时我都不会太担心更新商店。
事实上，React 的文档非常明确地涵盖了这一点。 React 团队在确保 React 闪电般快速上花费的时间比合理的要多，不要在这上面浪费你自己的时间。传播每个更改，并相信 React 和 Virtual DOM 可以有效地处理它。尤其是如果这是您的第一个 React 应用程序，除了指标之外，您没有任何东西可以作为您的意见依据，因此在您获得显示 React 运行缓慢的统计数据之前不要尝试优化。只需编写正确的 React 代码并遵循正确的 React 方法即可。

标签： javascript reactjs flux

【解决方案1】：

为什么不直接使用 _.debounce（或您喜欢的库中的类似版本）。

【讨论】：

【解决方案2】：

每个 cmets，我取消了这个，因为 React 很快。

【讨论】：