代码之家 › 专栏 › 技术社区 › Beau

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

react-redux reactjs

Beau · 技术社区 · 6 年前

我想把连接组件的数量作为一个性能指标来跟踪,这样我就可以准确地估计每帧的预算。 mapStateToProps 以及其他Redux逻辑。

React devtools可以访问一个页面上的所有组件,因此我希望重用它所使用的钩子,或者也可以接受允许我枚举页面上所有组件的钩子(从那里我可以知道它们是否包装在 Connect 或者没有)。

1 回复 | 直到 6 年前

Estus Flask 6 年前

react-redux

反应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);

反应redux import 语句可以放在代码的其余部分之前(根据规范,它们应该放在前面)。有可能 reactRedux.connect = ... 修补将发生太晚或根本不会发生。

例如,该示例使用Codesandbox import './app' 如果没有错误,同样的示例在Stackblitz中也不起作用,因为SystemJS模块实现会导致只读导入。

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