仍在學習一些反應，并試圖了解渲染程序......在當前的專案之前，我覺得我有一個不錯的掌握。
import { useEffect, useState } from "react";
import BazaarPage from "./Components/BazaarPage";
import "./styles.css";
export default function App() {
const [data, setData] = useState();
useEffect(() => {
async function getData() {
fetch("https://api.slothpixel.me/api/skyblock/bazaar")
.then((data) => data.json())
.then((obj) => {
setData(obj);
});
}
getData();
}, []);
return <div className="App">{data && <BazaarPage data={data} />}</div>;
}
export default function BazaarPage({ data }) {
console.log(data);
return <div className="bazzar-page"></div>;
}
我希望這會 console.log 1 次......但它會呈現 4 次......我的想法是我的“BazaarPage”組件不會呈現，直到基于“資料”狀態的某些東西data && <BazaarPage data={data} />有條件的。我也理解“應用程式”組件應該呈現兩次，一次是在頁面的初始運行時，第二次是在我setData的 useEffect 中更新狀態時。
為什么這會記錄 4 次資料，我的理解在哪里不正確？
uj5u.com熱心網友回復：
StrictMode 渲染組件兩次（在開發而不是生產上），以檢測代碼的任何問題并警告您（這可能非常有用）。
如果您在您的應用中啟用了 StrictMode 但不記得啟用它，這可能是因為您最初使用 create-react-app 或類似方法來創建您的應用，默認情況下會自動啟用 StrictMode。
例如，您可能會發現您的 {app} 在 index.js 中被 <React.StrictMode> 包裹：
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root')
);
如果是這樣，您可以通過洗掉 <React.StrictMode> 標簽來禁用 StrictMode：
ReactDOM.render(
{app}
document.getElementById('root')
);
uj5u.com熱心網友回復：
在 React 中，您通常不應該依賴（重新）渲染的數量作為經驗法則。想象一下它會被足夠頻繁地渲染，所以你應該保持你的組件沒有副作用。包括 call console.log，這會導致副作用。正如上面已經正確建議的那樣，將您的 React-Application 包裝到React.StrinctMode會導致額外的重新渲染，以防止您依賴渲染的數量。
但是可能還有其他副作用，例如背景關系包裝您的應用程式并導致應用程式更新等等。
但是，您的邏輯不是問題，因為您在理論上是正確的??
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/506287.html
標籤：javascript 反应
下一篇：MYSQL 初學