console.log('Render test')在我的測驗組件中運行兩次。
沒有使用測驗狀態，我只是把它放在那里作為示例。Test 組件不依賴于測驗狀態，但它仍然呈現兩次。為什么？
index.js：
import React from "react";
import ReactDOM from "react-dom";
import AppTest from "./AppTest";
ReactDOM.render(<><AppTest /></>, document.getElementById("container"));
AppTest.js：
import Test from "./Test";
import React, {useState, useEffect} from "react";
function AppTest() {
const [tests, setTests] = useState([]);
useEffect(() => {
setTests(['test1', 'test2']);
}, []);
return (
<>
<Test />
</>
);
}
export default AppTest;
測驗.js：
import React, {useEffect} from "react";
function Test() {
useEffect(() => {
console.log("Render Test");
});
return (
<h1>Test</h1>
);
}
export default Test;
uj5u.com熱心網友回復：
您可以使用 React.memo 來防止重新渲染，除非道具發生變化 - 這有更多資訊 -當 React js 中的任何狀態發生變化時，如何停止重新渲染子組件？
uj5u.com熱心網友回復：
由于 AppTest 組件的行為，組件 Test 被渲染了兩次。AppTest 中的 useEffect 函式修改組件的狀態， setTests(['test1', 'test2']);因此 AppTest 組件被重新渲染。
如前所述，您可以使用 memoization 來避免重新渲染 Test 組件：
import React, {useEffect} from "react";
const Test= React.memo(()=> {
useEffect(() => {
console.log("Render Test");
});
return (
<h1>Test</h1>
);
}
export default Test;
uj5u.com熱心網友回復：
useEffect運行兩次，因為它缺少一個依賴陣列。添加一個空陣串列示它沒有依賴關系，然后您將不會看到多個日志陳述句：
function Test() {
useEffect(() => {
console.log("Render Test");
}, []);
// ...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/451958.html
上一篇：i18nextundefined不是物件（評估'_i18next.default.services.formatter.add'）