你好,我是 react 的新手,有時我發現函式后面有陣列,我試圖找到它的用途,可以解釋它的用途或提供檔案鏈接,這將有所幫助。謝謝
這是代碼的例子
export const PostsList = () => {
const {
data: posts = [],
isLoading,
isSuccess,
isError,
error
} = useGetPostsQuery()
const sortedPosts = useMemo(() => {
const sortedPosts = posts.slice()
sortedPosts.sort((a, b) => b.date.localeCompare(a.date))
return sortedPosts
}, [posts])}
不知道代碼末尾[posts]的用法
uj5u.com熱心網友回復:
更好地格式化代碼將使陣列的實際用途更加清晰:
const sortedPosts = useMemo(() => {
const sortedPosts = posts.slice()
sortedPosts.sort((a, b) => b.date.localeCompare(a.date))
return sortedPosts
}, [posts])
}
該陣列用作useMemoReact 鉤子的引數。
許多 React 鉤子(以 開頭的函式use)都使用這樣的陣列。這些被稱為“依賴陣列”。一般來說,陣列的意思是:
- 每當陣列中的一項更改渲染到渲染時,重新計算里面的值,并使用新值
- 如果陣列中的所有專案在新渲染期間保持不變,則回傳上次渲染期間計算的專案
在這種情況下,帶useMemo,表示sortedPosts只有在posts發生變化時才會重新計算。如果有重新繪制時posts不改變,在回傳的值以前渲染的useMemo將被用于sortedPosts代替。
重新使用舊值而不是在每次渲染時重新計算和使用該值可以提高性能,因為這意味著當該值傳遞給其他組件時,如果值相同,它們將不必重新渲染(===到過去渲染的值)。
查看React 的鉤子檔案,了解陣列對每個不同鉤子的作用的詳細資訊。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/389564.html
上一篇:基于函式args對資料幀執行操作
