4

到目前为止，我已经完成了两个官方 Flux 架构示例（https://github.com/facebook/flux）。

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

例如，假设由于服务器响应而导致示例中的待办事项项目发生变化，如何在不使用项目组件中的 setProps() 的情况下正确更新相应的项目（据我所知，这是禁止的） ?

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

4

1 回答 1

5

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(). 所以看看componentDidMountwhich 获取 store，每当 store 改变时绑定一个回调onStoreChange，然后将当前组件状态设置为items提供的 items 数组store.getItems()。

因此，当组件首次安装时，它会从 store 中获取当前项目并显示它们，每当 store 发生更改时，它将执行onStoreChange再次从 store 中获取项目并通过 再次设置它们this.setState()。

自然地，我们希望是干净的，因此该组件onStoreChange在卸载组件时也会删除绑定。

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

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

于 2014-10-12T14:47:35.087 回答