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

Question

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

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

例如,想象一下由于服务器响应,示例中的todo项目发生了变化,如何在不使用item组件中的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设置为由提供的items数组store.getItems().

因此,当组件首次安装时,它从商店获取当前商品并显示它们,每当商店更改它将执行时onStoreChange,它将再次从商店获取商品并通过商店再次设置this.setState().

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

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

有关这方面的更多信息,请访问facebook-flux文档:http://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view