1. 首頁 > 生活百科 > >

聊聊怎么利用Memoization提高React性能( 三 )

小知識it知識

handler 函數，這更改了傳遞給子組件的引用 。 因此，我們需要有一種方法來避免這種重復創建 。 如果未重新創建 handler 函數，則對 handler 函數的引用不會更改，因此子組件不會重新渲染 。
為了避免每次渲染父組件時都重新創建函數，我們將使用一個名為 useCallback() 的 React Hook 。 Hooks 是在 React 16 中引入的 。 要了解有關 Hooks 的更多信息，你可以查看 React 的官方 hooks 文檔，或者查看 `React Hooks: How to Get Started & Build Your Own" 。
useCallback() 鉤子傳入兩個參數：回調函數和依賴項列表 。
以下是 useCallback() 示例：
const handleClick = useCallback(() => { //Do something}, [x,y]);在這里，useCallback() 被添加到 handleClick() 函數中 。 第二個參數 [x, y] 可以是空數組、單個依賴項或依賴項列表 。 每當第二個參數中提到的任何依賴項發生更改時，才會重新創建 handleClick() 函數 。
如果 useCallback() 中提到的依賴項沒有更改，則返回作為第一個參數提及的回調函數的 Memoization 版本 。 我們將更改父組件，以便對傳遞給子組件的處理程序使用 useCallback() 鉤子：
//Parent.jsexport default function Parent() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; const handler = useCallback(() => { // 給 handler 函數使用 useCallback() console.log("handler"); }, []); console.log("Parent render"); return ( <div className="App"> <button onClick={handleClick}>Increment</button> <h2>{count}</h2> <Child name={"joe"} childFunc={handler} /> </div> );}子組件代碼將保持原樣 。
此示例的完整代碼這個 sandbox 中 。
當我們在上述代碼的父組件中增加 count 時，我們可以看到以下輸出：
Parent renderChild renderParent renderParent renderParent render由于我們對父組件中的 handler 使用了 useCallback() 鉤子，因此每次父組件重新渲染時，都不會重新創建 handler 函數，并且會將 handler 的 Memoization 版本傳遞到子組件 。 子組件將進行淺比較，并注意到 handler 函數的引用沒有更改，因此它不會調用 render 方法 。
值得注意的事Memoization 是一種很好的手段，可以避免在組件的 state 或 props 沒有改變時對組件進行不必要的重新渲染，從而提高 React 應用的性能 。 你可能會考慮為所有組件添加 Memoization，但這并不一定是構建高性能 React 組件的方法 。 只有在組件出現以下情況時，才應使用 Memoization：

    固定的輸入有固定的輸出時具有較多 UI 元素，虛擬 DOM 檢查將影響性能多次傳遞相同的參數
總結在本教程中，我們理解了：
    React 是如何渲染 UI 的為什么需要 Memoization如何在 React 中通過函數組件的 React.memo() 和類組件的 React.PureComponent 實現 Memoization通過一個例子展示，即使在使用 React.memo() 之后，子組件也會重新渲染如何使用 useCallback() 鉤子來避免在函數作為 props 傳遞給子組件時產生重新渲染的問題
希望這篇 React Memoization 的介紹對你有幫助！
原文地址：https://www.sitepoint.com/implement-memoization-in-react-to-improve-performance/
原文作者：Nida Khan
更多編程相關知識，請訪問：編程視頻?。?
以上就是聊聊怎么利用Memoization提高React性能的詳細內容，更多請關注電腦自學網其它相關文章！

推薦閱讀