divのスタイルを変更したい場合は、REACTでの完全な再レンダリングを防ぐ方法

Question

次のような状況があります。配列の配列からレンダリングされたボードを構築しています。キーを押すと、ボードが動く。ボードがかなり大きくなり、あまり変化しないので、私はその位置を変更するたびに再レンダリングしたくありません。 それは可能ですか？

ありがとうございました。ここで

は、部分的なコードです：あなたが試すことができますどのような

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({ 
        leftVisible: this.state.left + 10 
       }); 
       break; 
      case 39: 
       this.setState({ 
        leftVisible: 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> 
     ); 
    } 
} 

Answer 1

ではなく1枚の巨大なボードコンポーネントを持つよりも、あなたは小さなコンポーネントを作成することができ、子コンポーネントに変更を移動するということです。 Reactは、ほとんどのパフォーマンスにやさしい再レンダリングを計算するのに十分スマートです。コンポーネントロジックを小さなロジックに解析しようとすると、コードやその変更が簡単になります。

Answer 2

PureComponentを使用すると、コンポーネントのprops/stateが変更されない場合（不要な処理を防ぐことができます）（https://reactjs.org/docs/react-api.html#reactpurecomponent）。あなたのケースでは、各行や各タイルを独自のコンポーネントに抽出し、これらのコンポーネントはPureComponentを拡張します。

一般的には、PureComponentをどこにでも投げないようにするのがベストプラクティスですが、一度にいくつかのカップルだけが更新しているようなかなりの数のコンポーネントがあるような場合は、行く。