从多个表单获取数据会导致加载更多并变慢。如何在渲染元素之前避免导入或运行代码。
下面的代码运行两个元素。 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>
}回答1
您可以通过执行以下操作阻止这些子组件安装：
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;