React Hook 入門使用

adouwt發表於2020-12-27

ReactHook

React Hook 是什麼

1、沒有比官網說的更好的 HOOK

1. React Hook 官方

2. 用我們自己的話說，它是一個鉤子函式，用來處理元件間的狀態的一個方法，暫時理解為一個高階函式吧。

3. hook 一直說的副作用到底是啥？

　　解釋：之前可能已經在 React 元件中執行過資料獲取、訂閱或者手動修改過 DOM，統一把這些操作稱為“副作用”，或者簡稱為“作用”。

2、React Hook 可以做什麼

對於已經習慣使用class 的一些同學，使用生命週期函式也可以很方便的幫我們處理一些狀態，比如render函式渲染頁面， compnentDidMount 裡呼叫介面，comnentWillUnmount銷燬元件...,熟練使用這些生命週期函式也不是說有問題，但是在某一些事情上，比如在更新狀態的時候，需要對比下元件前後的資料，需不需要更新，如componentDidUpdate(prevProps, prevState)，元件銷燬的時候，我們是不是還要處理下其他髒活累活等等。上面的多餘的操作，React Hook 可以在 hook 函式裡面，可以幫我們做這些事。

3、React Hook 怎麼做（用）

我們繼續沿用官網的demo來講，（官網已經講的很透徹了）

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的叫做 “count” 的 state 變數
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default  Example

上面的程式碼的意思很簡單：定義一個 count = 0 的變數，和一個 setCount 的方法，來修改count 變數，簡單的理解 useState就是 count，setCount 執行的一個規則。最後我們匯出這元件，你在需要的地方可以匯入這個元件。這個方法很簡單，只是純粹的做了一個計數器，沒有複雜的邏輯，我們加一個邏輯，當count 變化的時候，與之有關聯的元件也隨變化

import React, { useState, useEffect } from 'react';

function Example() {
  // 宣告一個叫 "count" 的 state 變數
    const [count, setCount] = useState(0);
    const changeCountEffect = () => {
        return <div>
            count變化後，我是count的平方，我變成{count * count}
        </div>
    }
    useEffect(() => {
        document.title = `點選了${count}`
    })
    return (
        <div>
            <h3>Hook demo  展示</h3>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
            {changeCountEffect()}
        </div>
    );
}

export default  Example

這種場景很多，一個變化總會帶動別的地方變化，比如計算價格等，我們這裡不做展開了。

4、實戰演練

下面我們做一個簡單的介面呼叫，將介面資料渲染出來。

const  ApplicationDataShow = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
        request('/get/alluser', {}, 'get').then((res)=>{
            console.log(res);
            if(res) {
                setData(res.users)
            }
        })
    }, [])
    const addImg = () => {
        let imgItem = {
            avatar_url: "https://img.tukuppt.com//ad_preview/00/27/80/5f8c23f29eef4.jpg!/fw/780",
            regsiterTime: "2020/12/26 下午10:07:04"
        }
        setData([...data, imgItem])
    }
    const subImg = () => {
        let data1 = data.splice(1)
        setData(data1)
    }
    return(
        <div>
            <h2>列表資料展示</h2>
            <ul>
                {data.map((item, index)=> {
                    return <li key={index}>
                        <p><img src={item.avatar_url} alt="" width="100" height="100"/></p>
                        <p>{item.regsiterTime}</p>
                    </li>
                })}
            </ul>
            <button onClick={() => addImg()}>新增一張圖片</button>
            <p>
                <button onClick={() => subImg()}>刪除一張圖片</button>
            </p>
        </div>
    )

}