如何计算React组件的挂载数量？

Question

我有一个Ad组件可以动态加载到电子商务应用程序的不同页面中。我希望能够知道在任何给定时间反应页面中存在多少个这些组件。

我想知道是否有一个反应模式来确定在任何给定时间页面中存在多少个组件实例。

我想您会在应用程序的根目录中执行此操作，并迭代react.children，Ad​​在组件出现时对它们进行计数。

有谁知道这种方法的最佳实践？

谢谢 ：）

  match({ routes, location, history: browserHistory }, (error, renderProps) => {


    const requireComponents = (props) => props ? props.components.map((component) =>
      component && component.requireComponent && store.dispatch(component.requireComponent())
    ) : [];

    const render = () => {
      store.initialRender = true;
      ReactDOM.hydrate(
        (
          <AnalyticsProvider onEvent={analyticsHandler}>
            <Provider store={store}>
              <Router history={browserHistory}>{routes}</Router>
            </Provider>
          </AnalyticsProvider>
        ),
        document.querySelector(".js-content")
      );
      store.initialRender = false;
    };

    Promise.all(requireComponents(renderProps))
      .then(render)
      .then(() => window.newrelic.addPageAction("FIT"));
  });

我尝试过 console.logging renderProps- 该对象中有一些路由，还有一个 getComponent 函数，但我还没有看到我正在寻找的结果。

Answer 1

要计算给定组件的已安装实例数，您可以将以下内容添加到您的组件中（Ad.js根据您的情况）。

import React, { useEffect } from 'react'

let instancesCount = 0

const Ad = (props) => {
  useEffect(() => {
    instancesCount += 1
    console.log({instancesCount})
    return () => {
      instancesCount -= 1
      console.log({instancesCount})
    }
  }, [])

  return (
    // Whatever your component does
  )

instancesCount每次将实例Ad挂载到 DOM 时，该值都会递增，而每次卸载实例时，该值都会递减，从而有效地为您提供在任何给定时间已挂载实例的准确数量。每次安装或卸载实例时，它还会记录该编号。

要求：React v > 16.8.0

如果您的 React 版本较低，或者您的Ad组件是类组件，请使用以下命令：

let instancesCount = 0
class Ad extends React.Component {
  componentDidMount = () => {
    instancesCount += 1
    console.log({instancesCount})
  }
  componentWillUnmount = () => { 
    instancesCount -= 1
    console.log({instancesCount})
  }

  // Whatever your component does
}