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

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

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

例如,假设由于服务器响应,示例中的todo项目发生了更改,如何在不使用项目组件中的setProps()的情况下正确更新相应项目(实际上,据我所知,禁止) ？

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

解决方法:

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的商店中的this.state.items列表,并由ItemStore.getItems()访问.因此,请查看获取存储的componentDidMount,将存储更改为onStoreChange时的回调绑定,然后将项的当前组件状态设置为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

标签：javascript,reactjs,reactjs-flux,single-page-application
来源： https://codeday.me/bug/20190609/1207162.html