javascript - React shouldComponentUpdate() 不会阻止重新渲染

Question

我正在使用下面所示的 ThreeDisplay React 组件来保存 WebGL/Three.js Canvas ( Canvas 本身不是组件的一部分，它会附加到容器 div 通过初始化脚本)。

我希望组件仅在每次 RUN 和 UPDATE 操作后更新。这些操作由 ThreeDisplay 的父组件分派(dispatch)。

现在，由于某种原因，如果最后一个操作是 FADE_COLOR 或 SWITCH_COLOR，组件也会更新/重新渲染。这些操作由 ThreeDisplay 调度，它们由鼠标事件触发，如下面的代码所示。

我尝试使用 shouldComponentUpdate() 仅在上述操作之后进行更新。但由于某种原因，这并不能阻止组件在每个鼠标事件上重新渲染。

我的应用程序/原型(prototype)的完整代码可以在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

在这个表达式中

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

如果 nextProps.lastAction === 'RUN' 为 false，则代码将计算 OR 的另一个分支，即仅 'UPDATE' 字符串，其中始终为 true，因此 shouldUpdate 将始终为 true。

替换为

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