我如何计算我的组件在反应组件中渲染的次数答案

【问题标题】：How I can count how many times my component rendered in a react component我如何计算我的组件在反应组件中渲染的次数
【发布时间】：2022-06-27 21:50:11
【问题描述】：

我有以下 React 组件，

import React, {useState} from "react"

export default function App(){
  const [state, setState] = useState(0);
  return <>
    <button onClick={() => setState(state + 3)}>Click to increment</button>
    {state}
  </>
}

如何显示我的组件渲染的次数！谢谢！

【问题讨论】：

使用 useRef 挂钩

标签： javascript reactjs

【解决方案1】：

在组件外部存储一个计数器。每次组件渲染时递增。

let renderCount = 0;

export default function App(){
  const [state, setState] = useState(0);
  renderCount++;
  return <>
    <button onClick={() => setState(state + 3)}>Click to increment</button>
    {state}
    <p>This component has rendered {renderCount} times.</p>
  </>
}

请注意，有时组件可能会被额外渲染多次（例如，对于 Strict Mode 测试）。

【讨论】：

【解决方案2】：

你可以使用下面的代码，但是对于react 18，第一次renderCount.current会等于2，然后会加1。如果您希望第一次 renderCound.current 为 1，请使用 react 17 谢谢！

import React, { useState, useRef, useEffect } from "react";

export default function App() {
  const [state, setState] = useState(0);
  const renderCount = useRef(0);
  useEffect(() => {
    renderCount.current = renderCount.current + 1;
  });

  return (
    <>
      <button onClick={() => setState(state + 3)}>Click to increment</button>
      {state}
      {renderCount.current}
    </>
  );
}

【讨论】：