一、react-hooks概念

　　React中一切皆為元件，React中元件分為類元件和函式元件，在React中如果需要記錄一個元件的狀態的時候，那麼這個元件必須是類元件。那麼能否讓函式元件擁有類元件的功能？這個時候我們就需要使用hooks。
　　Hooks讓我們的函式元件擁有了類似類元件的特性，Hook是React16.8中新增的功能，它們允許您在不編寫類的情況下使用狀態和其他React功能

二、為什麼React中需要類元件

　　1、需要記錄當前元件的狀態
　　2、需要使用元件的一些生命週期函式

三、類元件與Hooks簡單對比

　　類元件 :

import React from "react"

export default class App extends React.Component{
    constructor(){
        super();
        this.state = {
            count:0
        }
        this.handleClick = this.handleClick.bind(this);
    }
    render(){
        let {count} = this.state;
        return (
            <div>
                <h2>{count}</h2>
                <button onClick={this.handleClick}>修改</button>
            </div>
            )
    }
    handleClick(){
        this.setState({
            count:this.state.count+1
        })
    }
}

hooks :

import React,{useState} from "react";

export default ()=>{
    let [count,setCount] = useState(0);
    let handleAdd = ()=>setCount(count+1);
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={handleAdd}>點選</button>
        </div>
    )
}

二者對比之後是不是感覺Hooks簡單好多了？那麼接下來我們來學習Hooks:

1、Hooks常用的方法
　　　　useState 、useEffect 、useContext以上三個是hooks經常會用到的一些方法

2、useState
　　useState是react自帶的一個hook函式，它的作用就是用來宣告狀態變數.useState這個函式接收的引數是我們的狀態初始值,它返回了一個數組，這個陣列的第 [0]項是當

       前當前的狀態值，第 [1]項是可以改變狀態值的方法函式。

import React,{useState} from "react"

export default ()=>{
    let [count,setCount] = useState(0);
    let addCount = ()=>setCount(count+1);
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={addCount}>點選</button>
        </div>
    )
}

　　  useState : 建立一個狀態,這個狀態為0
　　count : 代表當前狀態值也就是0
　　setCount : 更新狀態的函式
　　addCount = ()=>setCount(count+1);呼叫setCount就可以用來修改狀態

2-1、useState返回的是什麼？

const [count,setCount] = useState(0);

const state = useState(0);
const count = state[0];
const setCount  = state[1]

　注意：

　　　　1、useState一定要寫在函式初始的位置不能在迴圈或判斷語句等裡面呼叫，這樣是為了讓我們的 Hooks 在每次渲染的時候都會按照 相同的順序 呼叫，因為這裡有一個關鍵的問題，那就是 useState 需要依賴參照第一次渲染的呼叫順序來匹配對於的state，否則 useState 會無法正確返回它對於的state

　　　　2、我們可以在一個函式元件中使用多個

export default ()=>{
    let [count,setCount] = useState(0);
      let [count,setCount] = useState(0);
      let [count,setCount] = useState(0);
    
}

五、useEffect基本使用

　　　　我們寫的有狀態元件，通常會產生很多的副作用（side effect），比如發起ajax請求獲取資料，新增一些監聽的註冊和取消註冊，手動修改dom等等。我們之前都把這些副作用的函式寫在生命週期函式鉤子裡，比如componentDidMount，componentDidUpdate和componentWillUnmount。而現在的useEffect就相當與這些宣告周期函式鉤子的集合體。它以一抵三。

　　　　　　　　(useEffect = componentDidMount + componentDidUpdate+componentWillUnmount)

5-1、useEffect

　　　　useEffect中有兩個引數，第一個引數是一個函式，第二個引數是一個依賴的資料。第二個引數用來決定是否執行裡面的操作，可以避免一些不必要的效能損失，只要第二個引數中的成員的值沒有改變，就會跳過此次執行。如果傳入一個空陣列 [ ]，那麼該effect 只會在元件 mount 和 unmount 時期執行。

5-2、useEffect模擬componentDidMount && componentDidUpdate

import React,{useState,useEffect} from "react"

export default ()=>{
    let [title,setTitle] = useState(0);
    let updateTitle = ()=>setTitle(title+1);
    return (
        <div>
            <h2>{title}</h2>
            <button onClick={updateTitle}>點選</button>
        </div>
    )
    
    //引數是一個函式  每次mount 或者 update都會呼叫當前函式
    useEffect(()=>{
        document.title = `頁面為${count}`;
    })
    
}

5-3、如何只在componentDidMount中執行

import React,{useState,useEffect} from "react"

export default ()=>{
    let [title,setTitle] = useState(0);
    let updateTitle = ()=>setTitle(title+1);
    return (
        <div>
            <h2>{title}</h2>
            <button onClick={updateTitle}>點選</button>
        </div>
    )
    
    //將第二個引數設定為一個空陣列則只會在componentDidMount中執行
    useEffect(()=>{
        document.title = `頁面為${count}`;
    },[])
    
}

5-2、useEffect模擬componentWillUnMount

　　useEffect 中還可以通過讓函式返回一個函式來進行一些清理操作，比如取消訂閱。

useEffect = (()=>{
    return ()=>{
        //unmount時呼叫這裡
        document.removeEventListener();
    }
},[])

四、useEffect 什麼時候執行？ 

　　它會在元件 mount 和 unmount 以及每次重新渲染的時候都會執行，也就是會在 componentDidMount、componentDidUpdate、componentWillUnmount 這三個時期執行。

五、hooks的好處

　　面向生命週期程式設計變成了面向業務邏輯程式設計。

&n