javascript - 如何统计一个 React 组件的实例被挂载了多少？

Question

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

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

我想您会在应用程序的根目录中执行此操作，并遍历 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
  )

这将在每次将 Ad 实例安装到 DOM 时递增 instancesCount，并在每次卸载实例时递减它，有效地为您提供确切的数量在任何给定时间安装的实例。每次安装或卸载实例时，它也会记录该数字。

要求: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
}