Как подсчитать количество компонентов на странице, которые были связаны с функцией redux 'connect ()?

Question

Я делаю некоторый анализ производительности в большом приложении React / Redux, которое использует много подключенных компонентов (сотни).

Я бы хотел отслеживать количество подключенных компонентов в качестве показателя производительности, чтобы я мог точно оценить свой бюджет для каждого кадра, например. mapStateToProps и другая логика Redux.

React devtools имеет доступ ко всем компонентам на странице, поэтому я хочу либо использовать тот же хук, который он использует, либо также принять любой хук, который позволяет мне перечислять все компоненты на странице (и оттуда я можно выяснить, завернуты ли они в Connect или нет).

Answer 1

react-redux, похоже, не обладает определенной функциональностью для подключения к подключенным компонентам, в то время как инструменты Redux dev применяются к хранилищу в качестве промежуточного программного обеспечения и не зависят от подключенных компонентов React.

Простой способ состоит в том, чтобы обезопасить модуль react-redux и расширить подключенный компонент с определенным поведением, демо :

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 допускает изменения такого рода.