所以，我一直在试验 ReactJS 并且我一直在测试它在加载大量数据时的性能，我注意到它非常繁重。特别是，我注意到在我的演示应用程序加载了几千行之后，它开始使用数百兆字节。保留足够长的时间，大约 10,000 行，它将超过 1 GB 的 RAM 使用量。
Edit: I believe the high RAM usage was caused by having the React DevTools window open. It seems that using that significantly increased how much RAM is being used. However, without it open, it will still use a few hundred MB (up to 500MB, as low as 350MB) which I believe is quite a lot for just a big list.
我在下面提供了我的应用程序。它是完全独立的，因此只需创建一个文件(index.html 或其他文件)并将所有这些文本放入其中，然后运行该文件(或可选择将其托管在 Web 服务器上以访问 React DevTools)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
ol {
margin-left: 50px;
list-style-type: none;
}
p { display: inline; }
img {height: 1em; }
</style>
<script type="text/babel">
class ListItem extends React.Component {
render() {
return(<li><p>{this.props.index}.</p> <input type="checkbox" /><img src="http://www.tastyislandhawaii.com/images/spam_musubi/spam_can_open.jpg" /><a href="#">HELLO I AM SPAM NICE TO MEET YOU</a></li>);
}
}
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
TICK_INTERVAL: 500,
ROWS_PER_TICK: 100,
adding: false,
list: [],
total: 0,
count: 0
};
this.start = this.start.bind(this);
this.stop = this.stop.bind(this);
this.addMore = this.addMore.bind(this);
}
start() {
console.log("starting adding");
this.setState({adding: true, total: 20000});
setTimeout(this.addMore, this.state.TICK_INTERVAL);
}
stop() {
console.log("stopping adding");
this.setState({adding: false, total: 0});
}
addMore() {
console.log("adding more...", this.state.adding);
let tempCount = this.state.count;
let tempList = [];
for (let temp = 0; tempCount < this.state.total && temp < this.state.ROWS_PER_TICK && this.state.adding; temp++) {
tempList.push(<ListItem key={tempCount} index={tempCount}/>);
tempCount++;
}
this.setState({list: this.state.list.concat(tempList), count: tempCount});
if (this.state.count < this.state.total) {
if (this.state.adding) {
setTimeout(this.addMore, this.state.TICK_INTERVAL);
}
} else {
this.setState({adding: false});
}
}
render() {
let button;
if (this.state.adding) {
button = <button type="Submit" className="btn btn-danger" onClick={this.stop}>HALT!</button>
} else {
button = <button type="Submit" className="btn btn-success" onClick={this.start}>BOOM!</button>
}
return(<div>{button}<ol>{this.state.list}</ol></div>);
}
}
ReactDOM.render(<List/>, document.getElementById("root"));
</script>
</head>
<body><div id="root"></div></body>
</html>
最佳答案
问题出在 React DevTools 扩展中。当它处于事件状态时，它会导致应用程序的 RAM 使用量猛增。当我在终止进程后加载我的应用程序(并且我没有打开 React DevTools)时，我的应用程序使用了正常数量的 RAM。
关于reactjs - 为什么我的 React 应用程序使用这么多内存？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45136511/