问如何在React Native中跟踪`函数组件`的呈现计数？

EN

import React, { useRef } from 'react';
import { TextInput } from 'react-native';

const SHOW_RENDER_COUNTERS = true;

const useRenderCounter = () => {
  const renderCount = useRef(0);
  renderCount.current = renderCount.current + 1;

  if (__DEV__ && SHOW_RENDER_COUNTERS) {
    return (
      <TextInput
        style={{
          backgroundColor: 'hsl(0, 100%, 50%)',
          borderRadius: 6,
          color: 'hsl(0, 0%, 100%)',
          fontSize: 10,
          fontWeight: 'bold',
          height: 35,
          margin: 2,
          textAlign: 'center',
          width: 35,
        }}
        value={String(renderCount.current)}
      />
    );
  }
  return null;
};

export default useRenderCounter;

const Bubble = () => {
  const renderCounter = useRenderCounter();

  return (
    <>
      <BubbleCoomponentCode />
      {renderCounter}
    </>
  );
};