Hi guys,
So I’ve started to work on the Dungeon Crawler project, and I’ve noticed that the example’s performance is horrible, like every key press takes one second to move the character. When I started to work on it I figured why - since the grid is so huge it takes 400ms to render. So I want to do better, and just move the board using position style, instead of re-rendering it. But now i’m stuck since I just can’t figure out how to do it. I know about shouldComponentUpdate(), but with how I build the grid, i’m just not sure how to change the style but not to render the grid…
Any ideas/hint would be great, thanks!
Here’s some partial code:
class App extends Component {
constructor(props) {
super(props);
this.state = {
board: this.createEmptyBoard(),
top: 0,
left: 0
}
}
componentWillMount() {
document.addEventListener("keydown", this.handleKeyPress, false);
}
handleKeyPress = (e) => {
switch(e.keyCode) {
case 37:
this.setState({
left: this.state.left + 10
});
break;
case 39:
this.setState({
left: this.state.left - 10
});
break;
default:
break;
}
};
render() {
return (
<div className="main">
<div className="view">
<Board board={this.state.board} top={this.state.top} left={this.state.left}/>
</div>
</div>
);
}
}
/* Board Compontent */
class Board extends Component {
render() {
const board = this.props.board;
let boardJSX = [];
for (let i = 0; i < board.length; i++){
let tileJSX = [];
for (let j = 0; j < board[i].length; j++){
tileJSX.push(<div key={"tile-" + i + '-' + j} className={this.classByValue(board[i][j])}></div>);
}
boardJSX.push(<div key={"row-" + i} className="board-row">{tileJSX}</div>
);
}
let move = {
left: this.props.left
};
return (
<div className="board" style={move}>
{boardJSX}
</div>
);
}
}