React的新特性 ---- Hooks ---- 的基本使用

一、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的好處

　　面向生命周期編程變成了面向業務邏輯編程。