React JS - What do I need to start learning about optimization

React JS - What do I need to start learning about optimization
0

#1

I completed GoL and am about to tackle the dungeon crawler, but took a week to go off reservation a bit and try out an idea with React: a drawing pad where the image is saved as an array.

Below is the code for the approach I took.

My question at this point is how do I optimize stuff so that the drawing pad can be larger?

Right now if the drawing pad has over 300 individual cells (300 elements in an array), it bogs the browser (IE and Chrome) down to the point where the page is considered unresponsive.

The CodePen for the drawing application is here.

A sister application that takes the array created by the first application and displays the image is here.

var ActionBox = React.createClass({ 
  getInitialState: function() {
    return {
      bgColor2: 'white'
    }  
  },
  handleClick2: function() {
    if(this.state.bgColor2 === 'white')
    {this.setState({
      bgColor2: 'black'
    }) 
    }else{
      this.setState({
      bgColor2: 'white'
    })
   }
  },

  render: function() {
    return(
      <div className="actionBox" id={this.props.divkey} onClick={this.handleClick2} style={{backgroundColor:this.state.bgColor2}} >
        </div>
    );
  }, 
});


var ButtonsAndGrid = React.createClass({ 

  getInitialState: function() {
    return {
      bgColor: 'white',
      masterarray : [],
      mastercopyarray: [],
      masterarraylength : 255
    }  
  },

  componentWillMount: function() {
          this.getBlankArray();
       },

  getBlankArray: function() {
    var temparray= [];
    var masterlength = this.state.masterarraylength;
    for(var i=0; i<masterlength; i++){
       temparray.push('white'); 
    }
    this.setState({
      masterarray: temparray
    });
 },

  gotClicked: function() {
     this.setState({ bgColor: 'blue' });
     this.takeSnapShot();
  },

  gotUnClicked: function() {
     this.setState({ bgColor: 'white' });
   },

 takeSnapShot: function() {
   var arrCopyToLocalStorage= [];
   var nextElementsColor;
   var masterlength = this.state.masterarraylength;
    for(var z=0; z<masterlength; z++){
        nextElementsColor = this.getCurrentDivColor(z);
        arrCopyToLocalStorage.push(nextElementsColor)
    }   

   this.saveToLocalStorage(arrCopyToLocalStorage)
},

  getCurrentDivColor: function(w) {   
    var divBackgroundColor = document.getElementById(w).style.backgroundColor 
    return divBackgroundColor;    
    	},

 saveToLocalStorage: function(w) {
   var arrCopyToLocalStorage = [];
   arrCopyToLocalStorage = w;
   localStorage.setItem('reclist', JSON.stringify(arrCopyToLocalStorage));
  console.log("What gets pulled from local storage is " + exposeImageArrayData)
 },

  render: function() {
    var tempgrid = [];
    var masterlength = this.state.masterarraylength;
    for(var i=0; i<masterlength; i++){
       tempgrid.push(<ActionBox divkey={i} divcolor={this.state.masterarray[i]} stateHolder={this}/>); }
    return(
   <div>
   <div id="buttonsDiv">
   <button type="button" ref="button1" className="normalBtn" id="btn1" onMouseDown={this.gotClicked} onMouseUp={this.gotUnClicked} style={{backgroundColor:this.state.bgColor}}>Take Snapshot</button>  
    </div>  <div id="applicationGrid" >  {tempgrid} </div>
   </div>
    );
 } 
});

var MyApp = React.createClass({     
  render: function() {
    return(
     <div id="mainDiv" >
 <h1> Background Array Maker </h1>
   <ButtonsAndGrid /> <Footer />
   </div>
   );
 }, 
});

var Footer = React.createClass({
   render() {
   return (
     <footer>
       <div id="containerfooter">
         <p>Written by <a href="http://codepen.io/profaneVoodoo/full/dXBJzN/">John Gillespie</a> for rendering non-procedural backgrounds (for rendering background image arrays manually)</p>
       </div>
     </footer>
     );
    }
  });

ReactDOM.render(
  <MyApp />  ,
  document.getElementById('GoL')
);