Question

那个游戏是用react和redux开发的。我不是react-redux开发人员（我是.net开发人员）但是我必须继续这个项目所以我是新的反应和redux 那些游戏性能在一些Android手机中太糟糕了。所以我分析了project.I看到组件渲染方法每秒都有效。我的组件包含超过30个其他组件。所以每个secon它重新渲染，这导致一些旧的性能不好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（＆＃39; state＆＃39;）和this.props.gameStore.get（＆＃39; state＆＃39;）是一样的。为什么下一个状态和当前状态相同？我该怎么办？？我使用的是构造函数，但它仍然是我的所有组件代码

    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()
}));

但它仍无法在浏览器中打开

Answer 1

关于您的组件我注意到的事情很少

render方法为子组件做了很多初始化
shouldComponentUpdate是不必要的，因为它只处理道具（预期所有状态都在redux商店中）。
使用connect()将PureComponent连接到商店是不必要的。您的组件没有声明，它的更好和功能components created using a simple es6 arrow function

对于2.和3.在创建容器时，请参考优化connect()上的note。

现在无法告诉您为什么每秒都要渲染组件而不检查组件的每一行。但是，仔细考虑以下内容可以帮助您确保重新渲染是节俭地触发并且仅在必要时触发。

<强> 1。保持render()方法尽可能轻量化 render可能是所有组件中调用最多的方法。更臃肿，你会慢慢渲染周期。您可以将所有localStorage.setItems移至componentWillReceiveProps。 synchronous LocalStorage calls中的每一个都占用了渲染时间。

<强> 2。删除shouldComponentUpdate。而是仅将那些道具传递给它绝对需要的组件。制作尽可能多的无状态纯函数

shouldComponentUpdate是一个转义填充，用于获取需要渲染的更多道具的组件。 sCU的缺点：它在每个组件重新渲染之前运行。在某些情况下，它可以减速而不是加快速度。请参阅jimfb的此评论here。这支持了我将尽可能多的组件转换为无状态功能组件的建议 - 包括您在此处发布的组件

第3。如果你的组件是无状态的javascript函数，只需要它们需要的道具，就不需要PureComponent。

Answer 2

好像你需要React.PureComponent。这是它的链接。 Link

基本上它的作用是在渲染每个组件之前，它将检查组件是否在props或状态中有任何变化。如果没有变化，它将不会reRender。

看起来您在reducer中使用了不可变数据结构。在你的mapStateToProps中，将所有不可变数据更改为调用toJS()方法的普通JS对象。然后PureComponent将按预期工作。

使用shouldComponentUpdate为块组件每秒重新渲染

2 个答案: