什麼是hook？聊聊React中常用的兩個Hook

如何快速入門VUE3.0：進入學習

先介紹一下什麼是hook

Hook是React 16.8新增的特性，專門用在函數式元件，它可以取代class元件中react的其他特性，是實際工作中要常用到的。

為什麼推薦使用hook進行開發

hook是專門配合函數式元件開發使用的，可以用它取代class元件的一些生命週期，避免大量this造成的混亂，因此hook便於開發，且更容易讓開發者理解程式碼

以上是個人簡單的總結，更多原因可以參考react官網：

https://react.docschina.org/docs/hooks-intro.html#motivation

useState

程式碼中：

React.useState(0)相當於class元件中的this. state加入一個屬性值

variable相當於class元件中的this.state. variable的值

setVariable可以用來修改variable的值，可以相當於class元件中的this.setState

import React,(useState) from 'react'
export default function useState_Demo() {
    const [variable, setVariable] = useState(0);//透過解構賦值，我們得到的variable、setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回呼中傳進來的參數是variable
    }
    render (
        <div> 
            <button onclick = {change}>點我會使variable+1</button>
        </div>
    )
}

useEffect

程式碼中：

以下程式碼可以看出，useEffect的使用取代了在class元件中componentDidMoun、componentDidUpdate、componentWillUnmount的使用

import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//透過解構賦值，我們得到的variable、setVariable
    
    useEffect(() => {
        //這個return是在該元件監測的資料變化時或是被卸載時呼叫的，被卸載時呼叫可以相當於componentWillUnmount鉤子return () => {
            console.log('該元件被卸載了')
        }
    }, [variable])//第二個參數傳了[variable]，表示偵測variable的更新變化，一旦variable變化就會再次執行useEffect的回呼//第二個參數傳了[],表示誰都不偵測只執行一次useEffect的回調，相當於componentDidMount鉤子//第二個參數不傳參，只要該元件有state變化就會執行useEffect的回調，相當於componentDidUpdate鉤子function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回呼中傳進來的參數是variable
    }
    render (
        <div> 
            <button onclick = {change}>點我會使variable+1</button>
        </div>
    )
}

使用hook要注意的

1、只在元件函數的最外層使用Hook，不要在循環，條件或巢狀函數中呼叫Hook

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //這裡才是正確的useEffect(() => {})
    
   //錯誤1，使用了條件判斷if(true) {
        useEffect(() => {})
   }
   //錯誤2，使用了循環while(true) {
        useEffect(() => {})
   }
  //錯誤3,使用了巢狀useEffect(() => {
      useEffect(() => {})
  })
}

2、無法在元件的函式外使用Hook

import React,(useState, useEffect) from 'react'
//錯誤1，在元件函數外使用了useState
const [variable, setVariable] = useState(0);
//錯誤2，在元件函數外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
   //在元件函數裡使用才是正確的const [variable, setVariable] = useState(0);
}

3.為了避免以上的錯誤，可以安裝eslint-plugin-react-hooks ESLint 插件來檢查程式碼上錯誤

自訂hook

hook就是一個函數，自訂hook是為了方便元件之間共享邏輯，其實就是對復用功能進行封裝，自訂hook內部也呼叫了react自帶的hook，命名要以use開頭

//自訂hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自訂hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

可能你會疑惑，多個元件中使用相同的Hook 會共用state 嗎？

答案是：不會。因為每次調用react自帶的hook都是獨自互不影響的，所以自訂hook被多次重複呼叫也是獨自互不影響的