Question

到目前为止，我通过两个官方的Flux架构示例（https://github.com/facebook/flux）进行了彻底的工作。

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

例如，假设由于服务器响应，示例中的todo项目发生了变化，如何在不使用项目组件中的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>
        );
    }
});

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

因此，当首次安装组件时，它会从商店获取当前商品并显示它们，每当商店更改时，它将执行onStoreChange，从商店再次获取商品并通过{再次设置它们{1}}。

当然我们希望保持干净，因此该组件在卸载组件时也会删除this.setState()绑定。

注意：请记住，在onStoreChange内调用this.setState() 而不是导致组件重新呈现：）

有关详情，请参阅facebook-flux文档：http://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view

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

1 个答案: