如何处理 Flux/React 中的数据更改

Question

到目前为止，我非常彻底地完成了两个官方的Flux架构示例(https://github.com/facebook/flux(。

但是，我真的不确定在呈现初始数据后如何完成数据更改。

例如，假设由于服务器响应而更改了示例中的待办事项，如何在不使用项目组件中的setProps((的情况下正确更新相应的项目(据我所知，这是禁止的(？

这可能更多是与 React 相关的误解 - 期待您的建议！

Answer 1

flux 的想法是，每次存储更改时，都将 React 组件的内部状态(或其中的一部分(设置为存储中的对象或值。

例如，像

这样的东西(不是真正的代码，而是给你一个想法(：

var Component = react.createClass({
    getInitialState: function() {
        return { 
            items: Flux.getStore("ItemStore").getItems()
        }
    },
    componentDidMount: function() {
        this.store = Flux.getStore("ItemStore");
        this.store.addChangeListener(this.onStoreChange)
    },
    componentWillUnmount: function() {
        this.store.removeChangeListener(this.onStoreChange);
    },
    onStoreChange: function() {
        this.setState({
            items: this.store.getItems()
        });
    },
    render: function() {
        var items = [];
        for (var i = 0; i < this.state.items; i++) {
            items.push(
                <li key={i}>{this.state.items[i]}</li>
            );
        }
        return (
            <ul>{items}</ul>
        );
    }
});

此示例组件的作用是呈现驻留在名为 ItemStore 的存储区中并由 ItemStore.getItems() 访问的this.state.items的列表。 因此，请查看获取存储的componentDidMount，将回调绑定到存储更改onStoreChange，然后将items的当前组件状态设置为store.getItems()提供的 items 数组。

因此，当组件首次挂载时，它会从商店中获取当前项目并显示它们，每当商店更改时，它都会执行onStoreChange再次从商店获取项目并通过this.setState()再次设置它们。

当然，我们希望保持干净，因此此组件在卸载组件时也会删除onStoreChange绑定。

注意：请记住，在componentDidMount内调用this.setState()不会导致组件重新渲染:)

有关此内容的更多信息，请参阅facebook-flux文档：http://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view