Javascript 将新服务器数据传递给react.js组件

我是React.js的新手，正在努力理解一些核心概念，以决定是否将此库用于我们的应用程序。我的主要问题实际上是在从服务器获取的模型中处理更新

想象一下，我有一个页面应该显示五种不同的模型。我已经按照本文所描述的方式构建了它，所以我有了“根”组件，所有5个模型都在其中传递，并且使用道具，它们将向下传递到包含这些模型的组件。所以，现在更新了两个模型（我从react组件之外的模型代码中获取这些事件），我需要在UI上反映这些。最好的方法是什么

我正在考虑以下选择：

再次使用新数据运行renderComponent，并依赖DOM diff react技术。我对此有点担心，因为我需要对任何微小的数据更改执行此操作

调用包含此模型的组件的setState。这样，数据就不是道具，而是状态（据我所知）不是一个好的实践。另外，我看不到任何方法可以在根组件之外获得子组件的ref

有多个renderComponent调用，因此通过这种方式，我可以访问此组件中任何组件的setProps。但是接下来我需要做一些模板工作（使页面上的所有容器都可用），这会扼杀所有的想法

具有一个根组件，其中包括向用户显示的应用程序中所有可能的模型，并调用setProps以更改模型。我在这里担心的是，这个组件会变得相当大，在某个点上变成“意大利面”+从点1开始的担忧

---

提前谢谢你，希望我能清楚地解释我的问题

使用相同的组件但不同的数据再次调用renderComponent相当于调用component.setProps（）。因此，要么以最小公分母将所有模型保持为状态，要么在更改时再次调用setProps/renderComponent。

如果您将数据作为道具传递给子组件，您只需在更高级别上更新它，它将强制对使用相同属性对象的所有组件进行渲染。考虑这个简单的例子：

var World = React.createClass({
    render: function() {
        return <strong>{this.props.name}</strong>;
    }
});

var Hello = React.createClass({
    clickHandler: function() {
        this.setProps({ name: 'earth' });
    },
    render: function() {
        return (
            <div>
                Hello <World name={this.props.name} />
                <button onClick={this.clickHandler}>Click me</button>
            </div>
        );
    }
});

---

这是因为react使用单向属性绑定。但是，如果说您的子组件将更新其属性，它将不会上升到其父组件。为此，您将需要或使用类似主干网提供的发布/订阅接口。

目前，我至少知道三种将新数据传递到组件的方法：

重新渲染组件。不要担心这种方法的效率，因为React似乎处理得很好。有很多关于这方面的好文章：和

使用PubSub可以在数据更改时通知组件（您可以在文章中找到一些有用的示例）

使用回调绑定（请参见下面的三个JSIDdle）

对于第三个选项，我从的答案中得到了启发，并对其进行了一些扩展。 请检查我在j的实现

var Data={value:1}；
var dataChange=函数（回调）{
如果（回调）{
回调（数据）；
setInterval（函数（）{
Data.value++；
回调（数据）；
}, 1000);
}
返回数据；
};
var World=React.createClass({
render:function（）{
返回{this.props.data.value}；
}
});
var Hello=React.createClass({
getInitialState:函数（）{
返回{
数据：this.props.dataChange（）
};
},
componentDidMount:function（）{
this.props.dataChange（this.updateHandler）
},
updateHandler:函数（数据）{
这是我的国家({
数据：数据
});
},
render:function（）{
返回(
价值：
);
}
});
React.renderComponent（，document.body）；

还有一个扩展版本在

函数ListenersService（）{
var侦听器={}；
this.addListener=函数（回调）{
变量id；
if（回调类型==='function'）{
id=Math.random（）.toString（36）.slice（2）；
侦听器[id]=回调；
}
返回id；
}
this.removeListener=函数（id）{
if（侦听器[id]）{
删除侦听器[id]；
返回true；
}
返回false；
}
this.notifyListeners=函数（数据）{
for（侦听器中的变量id）{
if（listeners.hasOwnProperty（id））{
侦听器[id]（数据）；
}
}
}
}
函数数据服务（ListenerService）{
变量数据={value:1}；
var self=这个；
var listenersService=new listenersService（）；
this.addListener=listenersService.addListener；
this.removeListener=listenersService.removeListener；
this.getData=函数（）{
返回数据；
}
setInterval（函数（）{
Data.value++；
ListenerService.notifyListeners（数据）；
}, 1000);
}
var dataSevice=新的数据服务（ListenerService）；
var World=React.createClass({
render:function（）{
返回{this.props.data.value}；
}
});
var Hello=React.createClass({
getInitialState:函数（）{
返回{
数据：this.props.dataService.getData（）
};
},
componentDidMount:function（）{
this.props.dataService.addListener（this.updateHandler）
},
updateHandler:函数（数据）{
这是我的国家({
数据：数据
});
},
render:function（）{
返回(
价值：
);
}
});
React.renderComponent（，document.body）；

此实现并不完全遵循独立组件的思想（因为Hello组件依赖于DataServiceAPI），但它可以进一步抽象，并取决于应用程序开发人员其组件将遵循哪些特定于应用程序的约定。例如

// simple example of a data model
var Data = { name: 'world' };

var World = React.createClass({
    render: function() {
        return <strong>{this.props.data.name}</strong>;
    }
});

var Hello = React.createClass({
    clickHandler: function() {
        this.setProps({
            data: { name: 'earth' }
        });
    },
    render: function() {
        return (
            <div>
                Hello <World data={this.props.data} />
                <button onClick={this.clickHandler}>Click me</button>
            </div>
        );
    }
});

React.renderComponent(<Hello data={Data} />, document.body);

var Data = { value: 1 };

var dataChange = function(callback){
    if(callback){
        callback(Data);
        setInterval(function(){
            Data.value++;
            callback(Data);
        }, 1000);
    }
    return Data;
};

var World = React.createClass({
    render: function() {
        return <strong>{this.props.data.value}</strong>;
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        return {
          data: this.props.dataChange()
        };
    },
    componentDidMount: function() {
        this.props.dataChange(this.updateHandler)
    },
    updateHandler: function(data) {
        this.setState({
          data: data
        });
    },
    render: function() {
        return (
            <div>
                Value: <World data={this.state.data} />
            </div>
        );
    }
});

React.renderComponent(<Hello dataChange={dataChange} />, document.body);

function ListenersService(){
    var listeners = {};
    this.addListener = function(callback){
        var id;
        if(typeof callback === 'function'){
            id = Math.random().toString(36).slice(2);
            listeners[id] = callback;
        }
        return id;
    }
    this.removeListener = function( id){
        if(listeners[id]){
            delete listeners[id];
            return true;
        }
        return false;
    }
    this.notifyListeners = function(data){
        for (var id in listeners) {
          if(listeners.hasOwnProperty(id)){
            listeners[id](data);
          }
        }
    }
}

function DataService(ListenersService){
    var Data = { value: 1 };
    var self = this;

    var listenersService = new ListenersService();
    this.addListener = listenersService.addListener;
    this.removeListener = listenersService.removeListener;
    this.getData = function(){
        return Data;
    }

    setInterval(function(){
        Data.value++;
        listenersService.notifyListeners(Data);
    }, 1000);
}
var dataSevice = new DataService(ListenersService);

var World = React.createClass({
    render: function() {
        return <strong>{this.props.data.value}</strong>;
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        return {
          data: this.props.dataService.getData()
        };
    },
    componentDidMount: function() {
        this.props.dataService.addListener(this.updateHandler)
    },
    updateHandler: function(data) {
        this.setState({
          data: data
        });
    },
    render: function() {
        return (
            <div>
                Value: <World data={this.state.data} />
            </div>
        );
    }
});

React.renderComponent(<Hello dataService={dataSevice} />, document.body);

<div id="static"></div>
<div id="dynamic"></div>
<script>

function ListenersService(){
    var listeners = {};
    this.addListener = function(callback){
        var id;
        if(typeof callback === 'function'){
            id = Math.random().toString(36).slice(2);
            listeners[id] = callback;
        }
        return id;
    }
    this.removeListener = function( id){
        if(listeners[id]){
            delete listeners[id];
            return true;
        }
        return false;
    }
    this.notifyListeners = function(data){
        for (var id in listeners) {
          if(listeners.hasOwnProperty(id)){
            listeners[id](data);
          }
        }
    }
}

function DataService(ListenersService){
    var Data = { value: 1 };
    var self = this;

    var listenersService = new ListenersService();
    this.addListener = listenersService.addListener;
    this.removeListener = listenersService.removeListener;
    this.getData = function(){
        return Data;
    }

    setInterval(function(){
        Data.value++;
        listenersService.notifyListeners(Data);
    }, 100);
}
var dataSevice = new DataService(ListenersService);
var halloDataDynamic = function(callback){
    var data = dataSevice.getData();
    if(callback){
        dataSevice.addListener(function(data){
            callback(data);
        });
    }
    return data;
};
var halloDataStatic = dataSevice.getData();

var World = React.createClass({
    render: function() {
        return <strong>{this.props.data.value}</strong>;
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        var data;
        if(typeof this.props.halloData === 'function'){
            data = this.props.halloData(this.updateHandler)
        }
        else data = this.props.halloData;
        return {
          data: data
        };
    },
    updateHandler: function(data) {
        this.setState({
          data: data
        });
    },
    render: function() {
        return (
            <div>
                Value {this.props.name}: <World data={this.state.data} />
            </div>
        );
    }
});
</script>

React.renderComponent(<Hello halloData={halloDataStatic} name="static"/>, document.getElementById('static'));
React.renderComponent(<Hello halloData={halloDataDynamic} name="dynamic"/>, document.getElementById('dynamic'));