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

IT技术 javascript reactjs
2021-05-01 03:48:43

我是 React.js 的新手，正在努力理解几个核心概念来决定我们是否应该在我们的应用程序中使用这个库。我的主要问题实际上是处理从服务器获取的模型中的更新。

想象一下，我有一个页面应该显示五个不同的模型。我已经按照本文中描述的方式构建了它：http : //facebook.github.io/react/blog/2013/11/05/thinking-in-react.html，所以我有“root”组件，其中所有通过并使用props的 5 个模型将向下传递到包含此模型的组件。因此，现在更新了 2 个模型（我从react组件之外的模型代码中获取这些事件），我需要在 UI 上反映这一点。做这个的最好方式是什么？

我正在考虑以下选项：

  1. 再次使用新数据运行 renderComponent 并依赖 DOM diff react技术。我对此感到担忧，因为我需要对任何小的数据更改执行此操作。
  2. 为持有此模型的组件调用 setState。通过这种方式，数据变得不是props，而是状态（据我所知）不是一个好的做法。另外，我没有看到任何方法可以在根组件之外获取对子组件的引用。
  3. 有多个 renderComponent 调用，这样我就可以访问任何这个组件的 setProps 。但随后我需要做一些模板工作（让页面上的所有容器都可用），这会扼杀所有react的想法。
  4. 拥有一个包含应用程序中所有可能模型的根组件向用户显示并调用 setProps 来更改模型。我在这里担心，这个组件会变得非常大并在某些时候变成“意大利面条”+来自第 1 点的担忧。

在此先感谢您，并希望我能够清楚地解释我的问题。

3个回答

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

如果你将数据作为 props 传递给你的子组件，你可以简单地在更高级别更新它，它会强制对使用相同属性对象的所有组件进行渲染。考虑这个简单的例子：

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>
        );
    }
});

现在，当用户单击按钮时，您会更改Hello组件上的属性，但是由于您将相同的属性（或数据）对象传递给子项，因此他们会对其做出react并相应地更新它的 shadow DOM。

这是我的意思的小提琴：http : //jsfiddle.net/xkCKR/

如果你有一个外部数据对象，你可以将它传递给顶层组件。请记住，这并不意味着存在双向绑定：

// 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);

这是有效的，因为 React 使用了单向的属性绑定。但是如果说你的子组件会更新它的属性，它就不会爬到它的父组件上。为此，您将需要ReactLink 附加组件或使用像 Backbone 提供的那样的发布/订阅界面。

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

  1. 重新渲染组件。不要担心这种方法的效率，因为 React 似乎处理得很好。有关于此的不错的文章：JavaScript 框架中的更改及其检测和使用 React.render 进行更新
  2. 使用 PubSub 允许组件在数据更改时收到通知（您可以在如何在 React 组件之间进行通信一文中找到一些有用的示例）。
  3. 使用回调绑定（参见下面的三个 jsfiddles）

对于第三个选项，我受到了StevenH回答的启发，并对其进行了一些扩展。请在 j sfiddle.net/kb3gN/12002/检查我的实现。

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);

jsfiddle.net/kb3gN/12007 上还有一个扩展版本。

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);

这个实现并不完全遵循隔离组件的想法（因为 Hello 组件依赖于 DataService API），但它可以进一步抽象并且取决于应用程序开发人员他的组件将遵循哪些特定于应用程序的约定。例如，参见jsfiddle.net/kb3gN/12015 中第一个和第二个示例的混合（halloDataStatic 对象和 HalloDataDynamic 回调）

注意：示例中使用的 ListenersService 遵循观察者模式，并且模式本身在许多场景中弊大于利。但除此之外，我想通过这些示例展示的是，有一种使用回调进行数据绑定的方法

<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'));
其它你可能感兴趣的问题
上一篇G 代码注释中是否允许使用括号？ 下一篇基于令牌的身份验证中的会话