React shouldComponentUpdate（）は再レンダリングを妨げません

Question

私はWebGL/Three.jsキャンバスを保持するために以下に示すThreeDisplayリアクションコンポーネントを使用しています（キャンバス自体はコンポーネントの一部ではなく、コンテナに追加されます）div初期化スクリプトによって）。

RUNとUPDATEの処理が完了するたびにコンポーネントを更新するだけです。これらのアクションは、親コンポーネントのThreeDisplayによってディスパッチされます。

何らかの理由で、最後のアクションがFADE_COLORまたはSWITCH_COLORだった場合、コンポーネントはまた更新/再レンダリングされます。これらのアクションはThreeDisplayによって送出され、マウスイベントによってトリガーされます（下のコードを参照）。

私はshouldComponentUpdate()を使用して、前述の操作の後にのみ更新しようとしています。しかし何らかの理由で、これがコンポーネントがすべてのマウスイベントで再レンダリングするのを妨げるものではありません。 nextProps.lastAction === 'RUN'がfalseの場合

自分のアプリケーション/プロトタイプの完全なコードは、この表現

const shouldUpdate = nextProps.lastAction === 'RUN' || 'UPDATE' 

でthis repository

import React from 'react' 
    import {connect} from 'react-redux' 

    import {fadeColor, switchColor} from '../actions' 

    class ThreeDisplay extends React.Component { 
     shouldComponentUpdate(nextProps) { 
      const shouldUpdate = 
       nextProps.lastAction === 'RUN' || nextProps.lastAction === 'UPDATE' 

      if (!shouldUpdate) { 
       console.log('ThreeDisplay will not update on ' + nextProps.lastAction) 
      } 

      return shouldUpdate 
     } 

     componentWillUpdate() { 
      // This gets logged even if lastAction ist not 'RUN' or 'UPDATE' 
      console.log('ThreeDisplay will update on ' + this.props.lastAction) 
     } 

     render() { 
      return (
       <div 
        id="container" 
        className={ 
         this.props.running 
          ? 'three-display' 
          : 'three-display hidden' 
        } 
        onClick={this.props.switchColor} 
        onMouseMove={this.props.fadeColor} 
       /> 
      ) 
     } 
    } 

    const mapStateToProps = state => { 
     return { 
      running: state.running, 
      lastAction: state.lastAction 
     } 
    } 

    const mapDispatchTopProps = dispatch => { 
     return { 
      fadeColor: e => dispatch(fadeColor(e)), 
      switchColor:() => dispatch(switchColor()) 
     } 
    } 

    export default connect(mapStateToProps, mapDispatchTopProps)(ThreeDisplay) 

Answer 1

で見つけることができ、その後、コードはORの他の枝を評価し、つまり、'UPDATE'文字列が常に真であるため、shouldUpdateは常にtrueになります。

const shouldUpdate = nextProps.lastAction === 'RUN' 
    || nextProps.lastAction === 'UPDATE'