时间戳

首页 > 解决方案 > 在昂贵的部分之前先加载 html 部分

reactjs - 在昂贵的部分之前先加载 html 部分

问题描述

对于一个输出大约 300 个单元格的表格，我有一个耗时的循环，每个单元格都有一些自定义计算，加载需要 4-5 秒，这是有道理的。所以我想在执行此操作时显示加载模式。然而，模式仅在昂贵的循环完成后显示？

const [loading, setLoading] = useState<boolean>(false);

useEffect(() => {
    if(loading){
      console.log(loading, "Loading has started")
    }   
}, [loading])


return(

<>
  <Modal show={loading}>Loading....</Modal>
  
  <a onClick={() => setLoading(true)}>Load more</a>
  
  // Expensive loop
  array.map(() => {
    // HMTL
    <div>
      ----
    </div>
  })
  
</>

)

我可以从控制台日志中看到“正在加载”的状态已更新，但模式尚未显示，所以我假设它正在等待循环完成（我不想要）。有没有办法让它首先输出模态的 html，或者我错过了 React 的基础知识？

标签： reactjs

解决方案

如果这是一个缓慢的计算，你可能不想在每次渲染时都这样做，因为组件可以渲染很多次。理想情况下，您只想在输入数据发生变化时进行那些昂贵的计算，这可以通过拆分处理和渲染来实现。

我不确定我是否完全理解它的加载部分是如何工作的，但是像这个例子这样的东西应该会有所帮助：

const [loading, setLoading] = useState<boolean>(false);
const [computedArray, setComputedArray] = useState([]);

useEffect(() => {
    setComputedArray(array.map(//expensive loop here))
    setLoading(false)
}, [array])

useEffect(() => {
    if(loading){
      console.log(loading, "Loading has started")
    }   
}, [loading])


return(

<>
  <Modal show={loading}>Loading....</Modal>
  
  <a onClick={() => setLoading(true)}>Load more</a>
  
  // Cheap loop, turn data into markup
  computedArray.map(() => {
    // HTML
    <div>
      ----
    </div>
  })
  
</>

)

推荐阅读