通過本地 JSON 文件映射反應中的大數據需要一些時間來加載。 如何解決？

Question

我正在使用與 TypeScript 的反應。 我正在通過 JSON 文件進行映射。 在瀏覽器中呈現所有數據需要一秒鍾。 我正在使用功能組件。 這是代碼。 請幫我優化瀏覽器中的渲染時間。

import users from "../data/users.json";

const Users:React.FC=() => {

  const displayUsers=users.map((item){
   return(
    <p> {item.username} </p>
    <p> {item.location} </p>
    <img src={item.avatar}/> 
   )
  })

  return(
    <div className='container'>
     <div className='user'>
      {displayUsers}
     </div>
    </div>
  )
}

Answer 1

問題：使用您當前的實現， users.map將在組件的每次渲染時執行。

您可以使用useMemo掛鈎對其進行優化：

import users from "../data/users.json";
const Users:React.FC = () => {

  const mappedUsers = useMemo(() => {
    return users.map((item) => {
      return( <>
        <p> {item.username} </p>
        <p> {item.location} </p>
        <img src={item.avatar}/> 
      </> )
    })
  }, [])
  
  return(
    <div className='container'>
      <div className='user'>
        {mappedUsers}
      </div>
    </div>
  )
}

現在map function 將在組件安裝時僅調用一次。

如果你想基於一些依賴變化使用map重新計算數據，你可以把它放在useMemo的依賴數組[]中。

如果users數據是通過某些父組件的props進行的，您可以使用React.memo來避免在props相同時重新渲染 (this) 子組件。 這是React.memo演示的相關帖子。