React+Redux中外部脚本初始化后组件重渲染失败排查

核心问题1：事件监听移除失败（附带内存泄漏风险） #

你在componentDidMount中使用this.handleForceUpdate.bind(this)添加事件监听，但bind每次调用都会生成新的函数引用，而componentWillUnmount里移除监听时用的是原始的this.handleForceUpdate，两者不是同一个函数，导致监听永远无法被移除——不过这不是当前组件不重渲染的直接原因，但必须修复。

核心问题2：forceUpdate在connect包裹的组件中失效 #

当组件被Redux的connect高阶组件包裹时，直接调用组件实例的forceUpdate可能无法触发预期的重渲染。因为connect内部会做浅比较优化，且forceUpdate仅作用于当前组件实例，而connect返回的才是实际挂载的顶层组件。

推荐解决方案：用状态驱动重渲染（符合React设计理念） #

添加一个状态变量标记外部脚本的初始化状态，通过更新状态触发重渲染，这是React推荐的常规做法：

const mapStateToProps = (state) => ({
    ...
});

class App extends Component {
    state = {
        isExternalScriptReady: false
    };

    // 使用箭头函数自动绑定this，避免bind生成新函数
    handleScriptInitialized = () => {
        console.log('external script initialized');
        this.setState({ isExternalScriptReady: true });
    }

    componentDidMount() {
        window.addEventListener('externalScriptInitialized', this.handleScriptInitialized);
    }

    componentWillUnmount() {
        window.removeEventListener('externalScriptInitialized', this.handleScriptInitialized);
    }

    render() {
        // 脚本初始化完成后，即可安全使用window上的全局变量
        return (
            <div>
                {this.state.isExternalScriptReady && (
                    <div>{window.yourRequiredGlobalVar}</div>
                )}
                ...
            </div>
        );
    }
}

export default connect(mapStateToProps)(App);

备选方案：修复forceUpdate的函数引用问题 #

如果一定要用forceUpdate，需要把绑定后的函数保存到实例上，确保添加和移除监听时用同一个函数引用：

const mapStateToProps = (state) => ({
    ...
});

class App extends Component {
    componentDidMount() {
        // 将绑定后的函数保存为实例属性
        this.boundHandleForceUpdate = this.handleForceUpdate.bind(this);
        window.addEventListener('externalScriptInitialized', this.boundHandleForceUpdate);
    }

    componentWillUnmount() {
        // 使用保存的函数引用移除监听
        window.removeEventListener('externalScriptInitialized', this.boundHandleForceUpdate);
    }

    handleForceUpdate() {
        console.log('forcing update');
        this.forceUpdate();
    }

    render() {
        return (
            <div>
                ...
            </div>
        );
    }
}

export default connect(mapStateToProps)(App);

注意：优先使用状态驱动的方案，forceUpdate属于React的非常规API，仅在特殊场景下使用，可能会破坏组件的状态驱动逻辑。

内容的提问来源于stack exchange，提问作者E-g