useState 小結
useState是React Hooks中的一個核心函數,它允許在函數組件中添加狀態(tài)。useState接受一個參數,這個參數是狀態(tài)的初始值。調用useState會返回一個數組,這個數組包含兩個元素:
- 當前狀態(tài)的值:這是通過useState定義的狀態(tài)的當前值,可以在組件內部被讀取和顯示。
- 更新狀態(tài)的函數:這是一個允許你更新狀態(tài)的函數。當你調用這個函數并傳入新的狀態(tài)時,React會重新渲染組件,以反映狀態(tài)的變化。
useEffect 小結useEffect是另一個重要的React Hook,用于在函數組件中執(zhí)行副作用操作(如數據獲取、訂閱或手動更改React組件中的DOM)。useEffect可以模擬類組件中的幾種生命周期*,具體取決于其第二個參數(依賴項數組)的內容。
- 模擬componentDidMount:當useEffect的第二個參數為空數組[]時,該回調函數僅在組件掛載后執(zhí)行一次,這類似于類組件中的componentDidMount生命周期*。
- 模擬componentDidUpdate:如果useEffect的第二個參數包含了一個或多個值,那么當這些值中的任何一個發(fā)生變化時,回調函數就會執(zhí)行。這可以用來在特定狀態(tài)或屬性更新后執(zhí)行操作,類似于類組件中的componentDidUpdate。
- 模擬componentWillUnmount:如果useEffect的回調函數返回了一個函數,那么這個返回的函數會在組件卸載前執(zhí)行,類似于類組件中的componentWillUnmount。這通常用于執(zhí)行清理操作,如取消訂閱、移除事件*等。
函數式組件的渲染函數式組件通過直接返回*X或組件樹來模擬render*。與類組件不同,函數式組件沒有顯式的render*;相反,組件的返回值直接對應于渲染結果。模擬shouldComponentUpdate在函數式組件中,沒有直接對應shouldComponentUpdate的*,但你可以使用React.memo和useMemo來優(yōu)化組件的渲染性能。
- React.memo:這是一個高階組件,用于對組件的props進行淺比較。只有當props發(fā)生變化時,才會重新渲染組件,這有助于避免不必要的渲染。
- useMemo:這個Hook返回一個記憶化的值。它僅會在其依賴項數組中的值發(fā)生變化時重新計算。這可以用于優(yōu)化昂貴的計算,避免在每次渲染時都重新執(zhí)行這些計算。