react hooks 使用

hooks 是react 16.8 引入的特性，他容許你在不寫class的狀況下操做state 和react的其餘特性。
hooks 只是多了一種寫組件的方法，使編寫一個組件更簡單更方便，同時能夠自定義hook把公共的邏輯提取出來，讓邏輯在多個組件之間共享。

基本用法

import React, { useState } from 'react'

export default function () {
    const [count, setCount] = useState(0)
    return <div>
        <button onClick={() => {
            setCount(count + 1)
        }}>+</button>
        {count}
        <button onClick={() => {
            setCount(count - 1)
        }}>-</button>
    </div>
}

hook 使用起來很是的簡單，上面咱們就寫使用 useState hook 的函數組件，useState函數返回了一對值一個是state的值另外一個是更新state的函數，咱們在點擊按鈕的時候調動更改state的函數，最終從新渲染ui

hook 在class中不起做用

Hook 是什麼

Hook 是什麼？ Hook 是一個特殊的函數，它可讓你「鉤入」 React 的特性。例如，useState 是容許你在 React 函數組件中添加 state 的 Hook。稍後咱們將學習其餘 Hook。

何時我會用 Hook？ 若是你在編寫函數組件並意識到須要向其添加一些 state，之前的作法是必須將其它轉化爲 class。如今你能夠在現有的函數組件中使用 Hook。

State hook

state hook的主要做用就是獲取須要的 state 和 更新state的方法

使用方法

const [state, setState] = useState(initialState);

參數： initialState 能夠直接是當前state的初始值，也能夠是一個函數，函數的返回值將做爲state的值，參數只會在組件的初始渲染中起做用

返回值：返回的是一個數組，一個是當前state的值，另外一個是更新state的方法，這裏面setState方法與class中的setState不一樣在於，此setState 不會合並state 中的值

若是須要定義多個state 只須要屢次調用useState 方法就行。

Effect hook

useEffect方法是在每次渲染以後執行，能夠理解爲class寫法中的 componentDidMount / componentDidUpdate（爲了方便理解能夠這麼理解，但不徹底同樣）

useEffect(didUpdate);

參數：function，在每次渲染以後執行，在函數裏能夠編寫更新dom ，添加訂閱 等。

參數返回值： function(能夠不返回) 若是 didUpdate函數中返回了一個函數，這個函數會在組件卸載前執行(每次渲染都會執行)須要清除上次訂閱的內容能夠再這裏面寫。

執行條件： useEffect 的第二個參數是一個數組，只有當數組中的的值發生改變的時候纔會調用effect，若是執行在第一次掛載和卸載的時候調用，只須要傳一個[]空數組

useContext

const value = useContext(MyContext);

獲取context 的值，相似於clss 寫法中的static contextType = MyContext ,當使用了useContext會在context 的值發生改變的時候從新render。

參數 接收對象是React.createContext 的返回值
返回值 context 裏的內容

若是對context 不瞭解能夠看 context 學習

自定義 hook

當咱們想在兩個函數之間共享邏輯時，咱們會把它提取到第三個函數中。而組件和 Hook 都是函數，因此也一樣適用這種方式。

自定義 Hook 是一個函數，其名稱以 「use」 開頭，函數內部能夠調用其餘的 Hook