我有重新渲染的問題。每次用戶關注輸入時，它都會重新渲染，甚至是輸入。每次用戶輸入一個單詞時，函陣列件都會重新渲染，但是我有大資料，因此一切都變得很慢。
import { useState } from "react";
import "./styles.css";
export default function App() {
const [containerID, setContainerID] = useState();
const [searchVal, setSearchVal] = useState();
return (
<div className="App">
{console.log("its rendering again")}
<input
onInput={(e) => setSearchVal(e.currentTarget.value)}
onFocus={(e) => setContainerID(e.currentTarget.id)}
id={1}
/>
<input
onInput={(e) => setSearchVal(e.currentTarget.value)}
onFocus={(e) => setContainerID(e.currentTarget.id)}
id={2}
/>
<input
onInput={(e) => setSearchVal(e.currentTarget.value)}
onFocus={(e) => setContainerID(e.currentTarget.id)}
id={3}
/>
<input
onInput={(e) => setSearchVal(e.currentTarget.value)}
onFocus={(e) => setContainerID(e.currentTarget.id)}
id={4}
/>
</div>
);
}
沒有一個函式開始作業，只是在每個焦點和輸入上呈現函式回傳部分。任何想法如何阻止這些不需要的渲染？這里也是代碼片段：
https://codesandbox.io/s/funny-germain-t0h8n?file=/src/App.js:0-962
uj5u.com熱心網友回復：
更改狀態會導致重新渲染。您可以使用 useRef 來避免此問題。您將在containerId.current和中獲得值searchValue.current。
export default function App() {
const containerId = useRef();
const searchValue = useRef();
return (
<input
onInput={(e) => searchValue.current = e.currentTarget.value}
onFocus={(e) => containerId.current = e.currentTarget.id}
id={1}
/>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/413266.html
標籤：