Question

所以，我一直在试验ReactJS，我在加载大量数据时一直在测试它的性能，我注意到它非常繁琐。特别是，我注意到在我的演示应用程序加载了几千行之后，它开始使用数百兆字节。留下足够长的时间，大约10,000行，它将超过使用的1 GB RAM。

编辑：我认为高RAM使用率是由React DevTools窗口打开引起的。似乎使用它显着增加了使用的RAM量。但是，如果没有它打开，它仍将使用几百MB（高达500MB，低至350MB），我相信这只是一个很大的列表。

这款应用程序的要求是什么呢？
为什么React在添加新行时更新整个List（如React DevTools“突出显示更新”功能所示）？
我可以做些什么来保持低RAM使用率，而不会在所有内容都加载时锁定浏览器？

我在下面提供了我的应用程序。它完全是自包含的，所以只需创建一个文件（index.html或其他）并将所有这些文本放入其中，然后运行该文件（或者可选择将其托管在Web服务器上以访问React DevTools）。 / p>

<!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>&nbsp;<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>

Answer 1

问题出在React DevTools扩展中。虽然它是活动的，但它会导致应用程序的RAM使用率急剧上升。当我在杀死进程后加载我的应用程序（并且我没有打开React DevTools）时，我的应用程序使用了正常数量的RAM。

为什么我的React应用程序使用了这么多内存？

1 个答案: