React Hooks系列之自定義Hooks

前言

react hooks 是 React 16.8 的新增特性。 它可以讓我們在函數組件中使用 state 、生命週期以及其他 react特性，而不僅限於 class 組件。react hooks 的出現，標示着 react中不會在存在無狀態組件了，只有類組件和函數組件。具體可查看官網。

優勢：

1. 函數組件不能使用state，遇到交互更改狀態等複雜邏輯時不能更好地支持，hooks讓函數組件更靠近class組件，擁抱函數式編程。
2. 解決副作⽤問題，hooks出現可以處理數據獲取、訂閱、定時執行任務、手動修改 ReactDOM這些⾏爲副作用，進行副作用邏輯。比如useEffect。
3. 更好寫出有狀態的邏輯重用組件。
4. 讓複雜邏輯簡單化，比如狀態管理：useReducer、useContext。
5. 函數式組件比class組件簡潔，開發的體驗更好，效率更⾼，性能更好。
6. 更容易發現無用的狀態和函數。

自定義Hooks

官網：https://reactjs.bootcss.com/docs/hooks-custom.html

例子：

 
import React，{useEffect} from 'react' 
//封裝的Hooks⽤用use開頭
const useChangeTitle= (title) =>{
	useEffect(()=>{ document.title=title
},[title]) }

exprot default (props)=>{ useChangeTitle("⾃自定義修改標題Hooks") return (
	<div> 測試⾃自定義Hooks
	</div> )
}

Hooks使用規則

官網：https://reactjs.bootcss.com/docs/hooks-rules.html

1. 只在頂層調⽤Hooks Hooks的調⽤，儘量只在頂層作⽤域進行調用不要在循環，條件或者是嵌套函數中調⽤Hook，否則可能會⽆無 ，確保每次組件渲染時都以相同的順序調⽤Hook。
2. 只在函數組件調⽤Hooks，React Hooks目前只支持函數組件，所以⼤大家別在class組件或者普通的函數⾥面調⽤Hook鉤⼦函數
3. React Hooks的應用場景在函數組件，自定義hooks

在未來的版本React Hooks會擴展到class組件，但是現階段不能再class⾥使⽤。