我有以下 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}
</>
}如何能夠顯示我的組件渲染的次數！謝謝！
uj5u.com熱心網友回復：
在組件外部存盤一個計數器。每次組件渲染時增加它。
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>
</>
}
請注意，有時組件可能會被渲染額外的時間（例如，對于嚴格模式測驗）。
uj5u.com熱心網友回復：
renderCount.current表示您的組件的渲染計數。您可以使用以下代碼，但對于 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}
</>
);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/495678.html
標籤：javascript 反应