如何计算页面上已使用 redux 的 connect() 函数连接的组件数量？

Question

我正在对使用许多连接组件（数百个）的大型 React/Redux 应用程序进行一些性能分析。

我想跟踪连接组件的数量作为性能指标，以便我可以准确估计每帧预算，例如mapStateToProps 和其他 Redux 逻辑。

React devtools 可以访问页面上的所有组件，因此我希望重用它所做的相同钩子，或者也接受任何允许我枚举页面上所有组件的钩子（从那里我可以判断它们是否包含在 Connect 中）。

Answer 1

react-redux 似乎没有挂钩连接组件的特定功能，而 Redux 开发工具作为中间件应用于存储，并且与连接的 React 组件无关。

一个简单的方法是猴子补丁react-redux 模块并扩展具有特定行为的连接组件，demo：

import * as reactRedux from "react-redux";

let connectedCount = 0;

function patchConnect(connect) {
  return (...args) => {
    const wrapWithConnect = connect(...args);
    return WrappedComponent => {
      const Connect = wrapWithConnect(WrappedComponent);

      return class ConnectWithCounter extends Connect {
        componentDidMount() {
          console.log(++connectedCount, this);
          super.componentDidMount();
        }

        componentWillUnmount() {
          console.log(--connectedCount);
          super.componentWillUnmount();
        }
      };
    };
  };
}

reactRedux.connect = patchConnect(reactRedux.connect);
reactRedux.connectAdvanced = patchConnect(reactRedux.connectAdvanced);

// import the rest of the app that imports redux-react
import('./app').catch(console.error);

react-redux 应该先打补丁，模块应该是可写的。这对模块化环境施加了限制，因为 ES 模块可以是只读的（根据规范，它们是只读的）并且 import 语句可能在其余代码之前（它们应该根据规范）。 reactRedux.connect = ... 修补有可能发生得太晚或根本不会发生。

例如，该示例使用 Codesandbox，它会毫无错误地提升 import './app'，而相同的示例在 Stackblitz 中不起作用，因为 SystemJS 模块实现会导致只读导入。

最好将开发环境配置为使用 CommonJS 模块，因为require 允许这种修改。