如何使用React + Flux快速渲染> 10000个项目？

Question

我想问一下在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);
			this.trigger(storage);
		}
	},
	getStorage: function () {
		return storage;
	}
});

module.exports = CheckboxListStore;

CheckboxListAction

操作,创建,检查和取消选中任何带有名称的复选框项.

const Reflux = require('reflux');
const CheckboxListAction = Reflux.createActions([
	'create',
	'check',
	'uncheck'
]);
module.exports = CheckboxListAction;

CheckBoxList的

const React = require('react');
const Reflux = require('reflux');
const $ = require('jquery');
const CheckboxItem = require('./CheckboxItem');
const checkboxListAction = require('./CheckboxListAction');
const checkboxListStore = require('./CheckboxListStore');
const CheckboxList = React.createClass({
	mixins: [Reflux.listenTo(checkboxListStore, 'onStoreChange')],
	getInitialState: function () {
		return {
			storage: checkboxListStore.getStorage()
		};
	},
	render: function () {
		const {storage} = this.state;
		const LiComponents = storage.map((state, name) => {
			return (
				<li key = {name}>
					<CheckboxItem name = {name} />
				</li>
			);
		}).toArray();
		return (
			<div className = 'checkbox-list'>
				<div>
					CheckBox List
				</div>
				<ul>
					{LiComponents}
				</ul>
			</div>
		);
	},
	onStoreChange: function (storage) {
		this.setState({storage: storage});
	}
});

module.exports = CheckboxList;

CheckboxItem 在onChange回调中,我调用动作来更新项目.

const React = require('react');
const Reflux = require('reflux');
const $ = require('jquery');
const checkboxListAction = require('./CheckboxListAction');
const checkboxListStore = require('./CheckboxListStore');

const CheckboxItem = React.createClass({
	mixins: [Reflux.listenTo(checkboxListStore, 'onStoreChange')],
	propTypes: {
		name: React.PropTypes.string.isRequired
	},
	getInitialState: function () {
		const {name} = this.props;
		return {
			checked: checkboxListStore.getStorage().get(name)
		};
	},
	onStoreChange: function (storage) {
		const {name} = this.props;
		this.setState({
			checked: storage.get(name)
		});
	},
	render: function () {
		const {name} = this.props;
		const {checked} = this.state;
		return (
			<div className = 'checkbox' style = {{background: checked ? 'green' : 'white'}} >
				<span>{name}</span>
				<input ref = 'checkboxElement' type = 'checkbox'
					onChange = {this.handleChange}
					checked = {checked}/>
			</div>
		);
	},
	handleChange: function () {
		const {name} = this.props;
		const checked = $(this.refs.checkboxElement).is(':checked');
		if (checked) {
			checkboxListAction.check(name);
		} else {
			checkboxListAction.uncheck(name);
		}
	}
});

module.exports = CheckboxItem;

Answer 1

除了初始渲染之外，您还可以使用 Mobservable 显着提高大型集合的渲染速度。当子组件发生更改时，通过自动应用横向加载，它可以避免不必要地重新渲染映射 10.000 个项目的父组件。请参阅此博客以获得深入的解释。