Question

我正在使用 REACTFIRE 来加载大量数据（超过1500个类别）。这就是我将数据绑定为数组的方式：

var ContentTable=React.createClass({
mixins: [ReactFireMixin],

getInitialState: function(){

    return{firebaseRefArray:[]};
},

componentWillMount: function() {

    //reference to firebase 
    var firebaseRef=firebaseAuthUtils.getRef();
    this.bindAsArray(firebaseRef.child("Categories"),"firebaseRefArray"); 

}, 
render:function(){

    return (<Table>
                    <thead>
                        <tr>
                            <th>ID</th><th>Name</th>
                        </tr>
                    </thead>
                    <tbody>            
                    {this.state.firebaseRefArray.map(function(firebaseRef){
                        return (<tr> 
                                    <td> {firebaseRef[".key"]}</td> 
                                    <td> {firebaseRef.name}</td> 
                               </tr>
                               )
                    }.bind(this))}
                </tbody>
                </Table>);    
}

}）;

不幸的是，这需要花费很多时间，有时我的应用程序会崩溃。我想知道是否有更好的方法（没有分页）。当我使用vanilla javascript时，我使用'child-added'事件来附加数据并在合理的时间内加载。我可以用 REACTFIRE ??

做类似的效果

修改所以似乎反应不会逐步添加数据，而是一次又一次地完成所有数据加载。那么有办法解决这个问题吗？

我已尝试 shouldComponentUpdate ，如下所示，但它根本不会渲染。通过记录我知道数组不断增长，但比较并没有表明它们在任何两次都不同。好像 prevstat.firebaseRefArray 和当前 state.firebaseRefArray 正在以相同的速度增长，因此条件始终为假。

shouldComponentUpdate:function(prevProps,prevState){
   return (this.state.firebaseRefArray!==prevState.firebaseRefArray)

},

我也试过条件this.state!==prevState这太慢了，渲染次数超过1500次（到目前为止）。有没有人有任何建议。看起来很奇怪，React没有办法处理这么多数据。也许我错过了什么？

Answer 1

尝试使用普通REST请求读取数据，将数据作为JSON获取，然后将其加载到数组中。这应该快得多，但不会提供双向绑定。请参阅REST API

的文档

使用reactfire加载大数据

1 个答案: