reactjs - 毎秒ブロックコンポーネントの再レンダリングに shouldComponentUpdate を使用する

Question

そのゲームはreactとreduxで開発されました。私はreact-redux開発者ではありません（私は.net開発者です）が、私はそのプロジェクトを継続しなければならないので、私はreactとreduxに慣れていません.そのゲームのパフォーマンスは、一部のAndroid携帯ではあまりにも悪いです.だから私は分析しますproject.コンポーネントのrenderメソッドが毎秒機能していることがわかります.私のコンポーネントには30を超える他のコンポーネントが含まれています.したがって、毎秒再レンダリングされ、一部の古いAndroid携帯でパフォーマンスが低下します

React コンポーネントが毎秒再レンダリングされるのはなぜですか?これをブロックできますか? その問題を検索すると、解決策が shouldComponentUpdate 関数であることがわかります

shouldComponentUpdate(nextProps,nextState) {

        console.log(nextProps.gameStore.get('state'));//waiting
        console.log(this.props.gameStore.get('state'));//waiting

        console.log(this.state);
        console.log(nextState);
        if (nextProps.gameStore.get('state')==this.props.gameStore.get('state')) {
            return false;
        }
        else {
            return true;
        }
        }

しかし、この関数 nextstate では、この状態は同じです。nextProps.gameStore.get('state') と this.props.gameStore.get('state') は同じです。なぜ次の状態と現在の状態が同じなのですか?どうすればよいですか? do?私はコンストラクターを使用しますが、それでも同じですここではすべてのコンポーネントコードです

    import React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
//import { default as HTML5Backend } from 'react-dnd-touch-backend';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { bindFirstArguments } from 'utils/bindFirstArgument';
import * as OkeyGameActions from 'actions/OkeyGameActions';
import * as OkeyNetActions from 'actions/OkeyNetActions';

import * as OkeyChatActions from 'actions/Chatactions';

import { SeatDirection } from 'constants/AppConstants';

import { OkeyScoreboardDialog }
from 'components/OkeyScoreboardDialog/OkeyScoreboardDialog';
import OkeyMatchResultDialog
from 'components/OkeyMatchResultDialog/OkeyMatchResultDialog';

import OkeyRackWrapper from 'components/OkeyRackWrapper/OkeyRackWrapper';
import OkeyTopToolbar from 'components/OkeyTopToolbar/OkeyTopToolbar';
import OkeyTableToolbar from 'components/OkeyTableToolbar/OkeyTableToolbar';
import OkeyTableCenter from 'components/OkeyTableCenter/OkeyTableCenter';

import CustomDragLayer from 'components/CustomDragLayer/CustomDragLayer';
import MessageList from 'components/chat/MessageList';
import PrivateEastMessageList from 'components/chat/PrivateEastMessageList';
import PrivateNorthMessageList from 'components/chat/PrivateNorthMessageList';
import PrivateWestMessageList from 'components/chat/PrivateWestMessageList';
import PrivateSouthMessageList from 'components/chat/PrivateSouthMessageList';

import './_OkeyGame.scss';

function toJS(item) {
  if (item === null) {
    return null;
  }
  //var item1=item.toJS();
  //if (item1.color==='BLACK') {
  //    var a='a';
    //}

  if (item == undefined) {
      return;
  }

  return item.toJS();
}

function getRelativeDirection(selfSeat, direction) {
  let relativeDirection = direction;

  if (selfSeat >= 0) {
    relativeDirection = (selfSeat - direction + 4) % 4;
  }
  return relativeDirection;
}

class OkeyGame extends React.Component {

    constructor(props) {
  super(props);
    }





    shouldComponentUpdate(nextProps,nextState) {

        console.log(nextProps.gameStore.get('state'));//waiting
        console.log(this.props.gameStore.get('state'));//waiting

        console.log(this.state);
        console.log(nextState);
        if (nextProps.gameStore.get('state')==this.props.gameStore.get('state')) {
            return false;
        }
        else {
            return true;
        }
        }
    render() {

    const { dispatch, gameStore, gamePlay, playRules } = this.props;

    let actions = bindActionCreators(OkeyGameActions, dispatch);

    let netActions = bindActionCreators(OkeyNetActions, dispatch);
    const currentTurn = gameStore.get('currentTurn');

    const playState = {
      selectedStone: gamePlay.get('selectedStone'),
      gosterge: gamePlay.get('gosterge'),
      middleStoneCount: gamePlay.get('middleStoneCount'),
      currentTurn: currentTurn
    };


    if (playState.gosterge != undefined) {
        window.localStorage.setItem('gostergeNumber', playState.gosterge._root.entries[0][1]);
        window.localStorage.setItem('gostergeColor', playState.gosterge._root.entries[1][1]);
    }


    const hasOpenedStonesThisTurn = {
      hasOpenedSequenceThisTurn: playRules.get('hasOpenedSequenceThisTurn'),
      hasOpenedPairsThisTurn: playRules.get('hasOpenedPairsThisTurn')
    };

    const rules = {
      canOpenSequence: playRules.get('canOpenSequence'),
      canOpenPairs: playRules.get('canOpenPairs'),
      canWithdraw: playRules.get('canWithdraw'),
      canDiscard: playRules.get('canDiscard'),
      canCollectOpen: playRules.get('canCollectOpen'),
      canLeaveTaken: playRules.get('canLeaveTaken'),
      canProcessStone: playRules.get('canProcessStone')
    };

    const discardMiniBoxes = {
      discardMiniBoxPairs: gamePlay.get('pairs'),
      discardMiniBoxSequence: gamePlay.get('sequence')
    };

    const selfSeat = gameStore.get('selfSeat');

    const { westSeat, eastSeat, northSeat, southSeat } =
    {
      westSeat: getRelativeDirection(selfSeat, SeatDirection.WEST),
      eastSeat: getRelativeDirection(selfSeat, SeatDirection.EAST),
      northSeat: getRelativeDirection(selfSeat, SeatDirection.NORTH),
      southSeat: getRelativeDirection(selfSeat, SeatDirection.SOUTH)
};

    const players = {
      selfSeat: selfSeat,
      pSouth: {
        seatId: southSeat,
        discardStones: gamePlay.getIn(['discardStones', southSeat]),
        profile: toJS(gameStore.getIn(['players', southSeat])),
        dispatch: dispatch
      },
      pNorth: {
        seatId: northSeat,
        discardStones: gamePlay.getIn(['discardStones', northSeat]),
        profile: toJS(gameStore.getIn(['players', northSeat])),
        dispatch: dispatch
      },
      pEast: {
        seatId: eastSeat,
        discardStones: gamePlay.getIn(['discardStones', eastSeat]),
        profile: toJS(gameStore.getIn(['players', eastSeat])),
        dispatch: dispatch
      },
      pWest: {
        seatId: westSeat,
        discardStones: gamePlay.getIn(['discardStones', westSeat]),
        profile: toJS(gameStore.getIn(['players', westSeat])),
        dispatch: dispatch
      }
    };


    let profiles = [
              players.pSouth.profile,
              players.pEast.profile,
              players.pNorth.profile,
              players.pWest.profile
    ];

    localStorage.setItem("selfSeat", selfSeat);
    localStorage.setItem("roomID", gameStore.get('id'));

    if (selfSeat == 0) 
        profiles = [players.pSouth.profile,players.pEast.profile,players.pNorth.profile,players.pWest.profile];

    else if (selfSeat == 1) 
        profiles = [players.pWest.profile,players.pSouth.profile,players.pEast.profile,players.pNorth.profile];

    else if (selfSeat == 2) 
        profiles = [players.pNorth.profile,players.pWest.profile,players.pSouth.profile,players.pEast.profile];

    else if (selfSeat == 3) 
        profiles = [players.pEast.profile,players.pNorth.profile,players.pWest.profile,players.pSouth.profile];


    const matchState = {
      name: gameStore.getIn(['options', 'name']),
      maxRounds: gameStore.getIn(['options', 'rounds']),
      stake: gameStore.getIn(['options', 'stakes']),
      round: gameStore.get('round')
    };



    const owner = gamePlay.get('ownerID');

    const scoreboard = gameStore.get('scoreboard');

    const matchResult = gameStore.get('matchResult');

    const restCountdown = gameStore.get('restCountdown');

    const roomState = gameStore.get('roomState');



const { messageList } = this.props;
const { privateEastMessageList } = this.props;
const { privateNorthMessageList } = this.props;
const { privateWestMessageList } = this.props;
const { privateSouthMessageList } = this.props;

let chatActions = bindActionCreators(OkeyChatActions, dispatch);
// const  dispatch1  = this.props

    // each action has a first argument of room id
netActions = bindFirstArguments(netActions, gameStore.get('id'));

    let from = gameStore.get('from');
    let to = gameStore.get('to');
    let gift = gameStore.get('gift');

    let from1 = gameStore.get('from1');
    let to1 = gameStore.get('to1');
    let gift1 = gameStore.get('gift1');

    let from2 = gameStore.get('from2');
    let to2 = gameStore.get('to2');
    let gift2 = gameStore.get('gift2');

    let from3 = gameStore.get('from3');
    let to3 = gameStore.get('to3');
    let gift3 = gameStore.get('gift3');

    let arayan = gameStore.get('arayan');
    let aranan = gameStore.get('aranan');

    return (
        <div className="game-background" style={{background: 'url(http://okey101.xyz/staticImg/background.png)',backgroundSize:'cover'}}>
      <div className="okey-game flex-centered-column">
       <CustomDragLayer isMini={gamePlay.get('isOver') > 0}></CustomDragLayer>


        <MessageList {...chatActions} {...netActions} messageList={messageList} />

             <OkeyScoreboardDialog profiles={profiles}
      scoreboard={scoreboard} />


        <OkeyMatchResultDialog matchResult={matchResult}
        {...netActions}
        {...actions}
        roomState={roomState}/>


        <OkeyTopToolbar {...netActions}
                        {...matchState}
                        profiles={profiles}/>

        <OkeyTableCenter {...actions}
                         {...netActions}
                         {...playState}
                         {...rules}
                         {...discardMiniBoxes}
                         {...players}
                         owner={owner}
                         messageList={messageList}
                         privateEastMessageList={privateEastMessageList}
                         privateNorthMessageList={privateNorthMessageList}
                         privateWestMessageList={privateWestMessageList}
                         privateSouthMessageList={privateSouthMessageList}
                         from={from} 
                         to={to}
                         gift={gift}
                         from1={from1} 
                         to1={to1}
                         gift1={gift1}
                         from2={from2} 
                         to2={to2}
                         gift2={gift2}
                         from3={from3} 
                         to3={to3}
                         gift3={gift3}
                         arayan={arayan}
                         aranan={aranan}
                         stones={gamePlay.get('stones')}/>

        <OkeyRackWrapper {...actions}
                         {...netActions}
                         {...playState}
                         stones={gamePlay.get('stones')}
                         stoneGroups={gamePlay.get('stoneGroups')}/>
        <OkeyTableToolbar {...actions}
                          {...netActions}
                          {...rules}
                          restCountdown={restCountdown}
                          currentTurn={currentTurn}
                          {...hasOpenedStonesThisTurn}
                          roomState={roomState}
                          stones={gamePlay.get('stones')}
                          {...discardMiniBoxes}
                          okeyStone={gamePlay.get('okeyStone')}/>

      </div>

</div>
    );
  }
}

const mapStateToProps = (state => ({
  gameStore: state.gameStore,
  gamePlay: state.gamePlay,
  playRules: state.playRules,
  messageList: state.MessageList,
  privateEastMessageList: state.PrivateEastMessageList,
  privateNorthMessageList: state.PrivateNorthMessageList,
  privateWestMessageList: state.PrivateWestMessageList,
  privateSouthMessageList: state.PrivateSouthMessageList
}));

const OkeyGameWithDnD = DragDropContext(HTML5Backend)(OkeyGame);

export default connect(mapStateToProps)(OkeyGameWithDnD);

編集: Aftab Khan ディレクティブを使用して、コンポーネントを PureComponent に変更しましたが、ページが開かず、コンソールにエラーはありません

これを次のように変更します

const mapStateToProps = (state => ({
    gameStore: toJS(state.gameStore),
    gamePlay: toJS(state.gamePlay),
    playRules: toJS(state.playRules),
    messageList: toJS(state.MessageList),
    privateEastMessageList: toJS(state.PrivateEastMessageList),
    privateNorthMessageList: toJS(state.PrivateNorthMessageList),
    privateWestMessageList: toJS(state.PrivateWestMessageList),
    privateSouthMessageList: toJS(state.PrivateSouthMessageList)
}));

それでもうまくいかないので、これに変更します

const mapStateToProps = (state => ({
    gameStore: state.gameStore.toJS(),
    gamePlay: state.gamePlay.toJS(),
    playRules: state.playRules.toJS(),
    messageList: state.MessageList.toJS(),
    privateEastMessageList: state.PrivateEastMessageList.toJS(),
    privateNorthMessageList: state.PrivateNorthMessageList.toJS(),
    privateWestMessageList: state.PrivateWestMessageList.toJS(),
    privateSouthMessageList: state.PrivateSouthMessageList.toJS()
}));

それでもブラウザで開かない