如何计算我的组件在react组件中呈现了多少次

Question

我有以下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}
</>
}

如何能够显示我的组件已经渲染的次数!谢谢!

Answer 1

renderCount.current表示组件的渲染计数。你可以使用下面的代码，但是对于react 18，第一次使用renderCount。电流等于2，然后增加1。如果你想要第一次rendercount。电流为1，使用反应物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}
</>
);
}

Answer 2

商店柜台外的组件。每次组件渲染时递增。

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>
</>
}

请注意，有时组件可能会被额外渲染多次(例如，对于严格模式测试)。

Answer 3

我看到在其他的帖子和选项，只是添加

console.count(柜台)

在代码中使用，然后每次组件渲染时，它都会更新计数器