这就是我在回应中写的。这叫做生活游戏。
我将一个单元格设置为div
,并将所有单元格存储在一个state
对象中,每个单元格的单元格名称看起来都像“ 0_0”,“ 0_1”,“ 0_2” ....,并且具有自己的活动状态和邻居。所以App
state
看起来像这样:
我建立了一个时间循环来检查每个单元的状态。
但是如您所见,尽管这种情况下没有太多的单元,但它的性能非常差。
我认为虚拟dom会获得良好的性能。
那么在这种情况下如何提高性能呢?
class Cell extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps, nextState) {
return nextProps.alive !== this.props.alive;
}
render() {
let className = ['life'];
if (this.props.alive) {
className.push('alive');
}
return (
<div className={className.join(' ')}></div>
);
}
}
let lifeSize = 5;
let w = 150;
let h = 150;
let chance = 0.75;
let stopTime = 333;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
//this.cellsDiv=[];
//console.log(store);
this.checkAlive = this.checkAlive.bind(this);
this.tick = this.tick.bind(this);
this.runTime = 1;
//per_width = per_width < 5 ? 10 : per_width;
for (let i = 0; i < parseInt(h / lifeSize); i++) {
for (let j = 0; j < parseInt(w / lifeSize); j++) {
let neighborCells = [];
neighborCells.push((i - 1) + '_' + (j - 1));
neighborCells.push((i - 1) + '_' + (j + 1));
neighborCells.push((i + 1) + '_' + (j - 1));
neighborCells.push((i + 1) + '_' + (j + 1));
neighborCells.push(i + '_' + (j - 1));
neighborCells.push(i + '_' + (j + 1));
neighborCells.push((i + 1) + '_' + j);
neighborCells.push((i - 1) + '_' + j);
this.state[i + '_' + j] = {};
this.state[i + '_' + j]['alive'] = (Math.random() > chance);
this.state[i + '_' + j]['neighbor'] = neighborCells;
}
}
}
checkAlive(cellName) {
//console.log(neighborCells);
let o = this.state[cellName];
//console.log(i,j);
let neighborCells = o['neighbor'];
let alivecount = 0;
for (let cell in neighborCells) {
//console.log(neighborCells[cell],this.state[neighborCells[cell]]);
if (this.state[neighborCells[cell]]) {
if (this.state[neighborCells[cell]]['alive']) {
alivecount++;
}
}
}
//let alive = this.state[i + '_' + j]['alive'];
//console.log(alive,alivecount);
if (o['alive']) {
if (alivecount < 2 || alivecount > 3) {
o['alive'] = false;
}
} else {
if (alivecount == 3) {
o['alive'] = true;
}
}
//console.log(o);
let cells = {};
cells[cellName] = {};
cells[cellName]['alive'] = o['alive'];
cells[cellName]['neighbor'] = o['neighbor'];
this.setState(cells);
}
tick() {
//console.log(this.runTime,stopTime);
if (this.runTime >= stopTime) {
clearInterval(this.timer);
}
//console.log(this.state);
for (let cellName in this.state) {
this.checkAlive(cellName);
}
this.runTime++;
//console.log(this.state);
//this.setState({alive:alive});
}
componentDidMount() {
this.timer = setInterval(this.tick, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<div id="show">
{ Object.keys(this.state).map((k, index) => <Cell key={k} alive={this.state[k]['alive']}/>) }
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
#show {
width: 150px;
height: 150px;
border: 1px solid black;
xbackground: #f0f0f0;
margin: 0;
padding: 0;
}
.life {
width: 5px;
height: 5px;
xborder: 1px solid black;
background: white;
float: left;
xmargin: 1px;
}
.alive {
background: black;
}
body {
margin: 0;
padding: 0;
xbackground: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
您正在为每个单元格调用this.setState。
每次调用this.setState时,都会调用一次render。您应该延迟此通话。
像这样的东西:
let newState = {};
for (let cellName in this.state) {
newState = {...newState, this.checkAlive(cellName)}; //remember removing the setState from checkAlive
}
this.setState(newState);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句