我想问一下在React中快速渲染> 10000个项目的正确方法是什么.
假设我想创建一个checkboxList,其中包含超过动态的10000个复选框项.
我创建了一个包含所有项目的商店,它将用作复选框列表的状态.
当我点击任何复选框项时,它将按操作更新相应的项目,因此商店已更改.
由于存储已更改,因此会触发复选框列表更新.
复选框列表更新其状态并再次渲染.
这里的问题是,如果我点击任何复选框项目,我必须等待> 3秒才能看到勾选复选框.我不希望这只需要重新渲染一个复选框项.
我试图找到根本原因.最耗时的部分是在复选框列表渲染方法中,与.map相关,它创建Checkbox组件以形成componentList ..但实际上只有1个复选框必须重新渲染.
以下是我的代码.我使用ReFlux作为助焊剂架构.
CheckboxListStore
商店将所有复选框项目存储为地图.(名称为键,状态(true/false)为值)
const Reflux = require('reflux');
const Immutable = require('immutable');
const checkboxListAction = require('./CheckboxListAction');
let storage = Immutable.OrderedMap();
const CheckboxListStore = Reflux.createStore({
listenables: checkboxListAction,
onCreate: function (name) {
if (!storage.has(name)) {
storage = storage.set(name, false);
this.trigger(storage);
}
},
onCheck: function (name) {
if (storage.has(name)) {
storage = storage.set(name, true);
this.trigger(storage);
}
},
onUncheck: function (name) {
if (storage.has(name)) {
storage = storage.set(name, false); …