從多個表單獲取資料會導致加載更多并變慢。如何在渲染元素之前避免匯入或運行代碼。
下面的代碼運行兩個元素。ProductTitle和ProductDemo樣式為“無”，但執行 consol.log("ProductTitle")和 consol.log("ProductDemo")。
主要js
import { lazy } from 'react';
const ProductTitle = lazy(() => import('./ProductTitle'))
const ProductDemo = lazy(() => import('./ProductDemo'))
import { useState } from 'react';
import { Panel } from 'react-instantsearch-dom';
const Product = () => {
const [panel, SetPanel] = useState(0)
return (<div>
<button onClick={()=>SetPanel(panel 1)} >Next panel</button>
<Suspense fallback={null} >
<div style={{ display: (panel === 1) ? 'none' : 'block' }} >
<ProductTitle />
</div>
<div style={{ display: (panel === 2) ? 'none' : 'block' }} >
<ProductDemo />
</div>
</Suspense>
</div>);
}
export default Product;
產品標題.js
const ProductTitleA = ({ }) => {
console.log("ProductTitle")
return <div>
this ProductTitle Panel
</div>
}
產品演示.js
const ProductDemo = ({ }) => {
console.log("ProductDemo")
return <div>
this ProductDemo Panel
</div>
}
uj5u.com熱心網友回復：
您可以通過執行以下操作阻止這些子組件安裝：
import { lazy } from 'react';
const ProductTitle = lazy(() => import('./ProductTitle'))
const ProductDemo = lazy(() => import('./ProductDemo'))
import { useState } from 'react';
import { Panel } from 'react-instantsearch-dom';
const Product = () => {
const [panel, SetPanel] = useState(0)
return (<div>
<button onClick={()=>SetPanel(panel 1)} >Next panel</button>
<Suspense fallback={null} >
{(panel === 1) ? <div/> : <div >
<ProductTitle />
</div>}
{(panel === 2) ? <div/> : <div>
<ProductDemo />
</div>}
</Suspense>
</div>);
}
export default Product;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/474457.html
標籤：javascript 反应
下一篇：如何更改音頻播放中的當前時間？