Reactでテトリスをつくる⑥＿レンダリングの負荷を抑える

テトリスなどのDOMの動きが激しいものは、レンダリングの負荷を抑えた方がよい。
今までは、画面全部を毎回描画していたが、更新部分だけの描画にして、負荷を抑えたい

• まずは、描画を変動部分と静的部分に分けた
  • テトリスの枠とか、すでに底に落ちたブロックは静的部分として、落ちてくるブロックを動的部分とした。
  • 毎回の描画は、落ちてくるブロックを描画する。
  • ブロックが底まで落ちたら、そのブロックを静的部分に追加する。

return (
        <div onKeyDown={(e) => {keydown(e)}} tabIndex="0">
            <Flow disp={disp}/>
            <Static base={base}/>
        </div>
    )

これだけだと、setStateの呼び出しでStaticもレンダリングされてしまうので、memo化などをすることになる

• memo化

const Static = React.memo(({...props})=> {
    let screen = []
    for(let i = 0; i < props.base.length; i++) {
        for(let j = 0; j < props.base[i].length; j++) {
            (props.base[i][j]===1) ? screen.push(<Dot x={j * 20} y={i * 20} />) : null
        }
    }
    return ({screen})
})