状态更改时发送带有状态数据的 ajax 请求答案

【问题标题】：sending ajax request with state data when state changes状态更改时发送带有状态数据的 ajax 请求
【发布时间】：2016-06-12 14:46:42
【问题描述】：

我有一个反应组件，我在其中使用 日期选择器。根据选择的 Date 值，我正在发送一个 ajax 请求来获取数据。我没有使用任何框架，例如 redux 或 Flux。

export default class MyComponent extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        // Initial fetch request based on the default date
    }

    onDateSelectionChanged(fromDate, toDate) {
        this.setState({
            fromDate,
            toDate
        });
    }

    render() {
        return (
            <div className="row">
                <DateRangePicker callBackParent = {this.onDateSelectionChanged}/>
                {/* other stuff */}
            </div>
        );
    }
}

现在假设我将日期更改为另一个日期。再次获取数据的最佳方法是什么？我应该在onDateSelectionChanged 再次发出请求还是有任何生命周期方法？

【问题讨论】：

标签： javascript ajax reactjs

【解决方案1】：

我强烈建议将 ajax 逻辑与您的组件分离。请记住，构建简单的 React 只是为了简化视图的呈现，而不是用于像 Http 调用这样的复杂逻辑。

使用 Flux，您可以快速创建用于处理 UI 渲染和应用程序任何其他逻辑的基础架构。

完整的教程是here，但我会添加一个简短的摘要，以便您轻松上手。

添加 4 个类作为您的基础架构：

YourComponentActions - 此类将处理您的组件将触发的“动作”。操作实际上是一个事件，它会从您的组件触发到执行实际逻辑的某个事物（第 4 点）。
SharedConstans - 此类将保存您应用的事件名称。
AppDispatcher - 此类将管理您的事件处理应用程序。
YourComponentStore - 此类将注册到操作的事件并处理 http 调用。这是与 UI 分离的组件的逻辑。在收到来自 ajax 调用的响应后，您将从商店中触发另一个事件，并且您的组件将注册到它，然后才更新状态。

感觉很复杂，但是从现在开始，您可以轻松地将任何逻辑添加到您的应用程序中，同时保持其解耦、可读性和易于维护。阅读有关 Flux 的更多信息here。

【讨论】：

redux 呢？我应该使用flux还是redux？如果您在答案中提供一些比较，那就太好了。谢谢。
在这里您可以为您的问题找到一个很好的答案stackoverflow.com/questions/32461229/…。我使用了flux，并没有看到转向redux的主要优势
Redux 与 Flux 相比并没有特别的优势，但它是对这些想法的改进。 API 足够小，如果您保持在“良好实践”或“惯用代码”的范围内，则可以启用一些非常强大的工具。因为所有状态更改都是通过操作执行的，并且所有状态都是不可变的，所以 Redux devtools 可以安全地让您通过应用的操作前进和后退，并且使用正确的构建工具，您可以在不刷新整个页面的情况下热交换组件和 reducer。跨度>

【解决方案2】：

您应该在onDateSelectionChanged 中触发另一个网络请求，状态变化时没有生命周期方法。

从技术上讲，您可以在componentWillUpdate（或更糟的是shouldComponentUpdate）中执行一些逻辑，以便在该状态字段发生更改并且它会起作用时发出请求，但您不应该这样做。这两种生命周期方法都有明确定义的目的，使网络请求会使您的代码不那么清晰且难以维护。

【讨论】：

在onDateSelectionChanged 上发送网络请求是最后的手段。我认为应该有其他方法来处理它。
“网络请求应该在哪里发生”是 Flux 和 Redux 回答的一个问题，但在 React 中，您必须在工作执行的地方进行。可能很快就想看看 Flux/Redux，这就是解决数据流问题的地方。

【解决方案3】：

如果你真的坚持从你的组件方法发送请求，那么在onDateSelectionChanged 中触发它绝对是要走的路。因为它响应每一个日期的变化，自然是唯一能够满足你需求的方法，生命周期方法并不直接知道日期的变化，也不知道正确的位置去做吧。在例如实现类似的东西componentWillUpdate 或 componentDidUpdate 可能会导致循环执行，这不是您没有充分理由想要面对的事情。

说到生命周期方法，唯一明确推荐触发请求的方法是componentDidMount 方法，您可以在其中进行一些ajax 初始化操作，如您在docs 中所见，但都不适合普通的数据获取。

另一方面，我建议你真正看看Flux，这是一个解决许多问题的架构，关注点分离就是其中之一。您的问题是您将组件与 Ajax 请求的创建联系在一起，这不会提高可重用性并使您的代码更难维护。将组件视为呈现内容和捕获用户输入的工具，它们不应该关心请求和响应或处理和存储传入数据（至少在更大范围内）。

您当然可以将您的请求创建者与外部函数分开，但如果您倾向于编写 React 前端，您迟早会遇到诸如通过许多中间组件或传播事件处理 props 的问题向上遍历您的组件层次结构，如果没有某种架构，这是非常乏味和混乱的，Flux 是解决这些问题的最佳解决方案，因此是需要学习的第一技术 - 如果您认真对待React。

【讨论】：

【解决方案4】：

onDateSelectionChanged(fromDate, toDate) {
    var self = this; // we can not use this inside ajax success callback function
    this.setState({
        fromDate,
        toDate
    }, function() { // callback fires after state set
        // your ajax request goes here, let say we use jquery
        $.ajax({
           url: fetch_url, success: function(data) {
               // again we can setState after success, but be careful
               // we can not use "this" here instead we use "self"
               self.setState({
                   someState: data.someValue
               })
           }
        })
    });
}

【讨论】：