Hook 是 React 16.8 的新增特性，它可以讓你在不撰寫 class 的情況下使用 state 以及其他的 React 特，Hook 在 class 內部是不起作用的，但你可以使用它們來取代 class ，
📌 State Hook（useState）
useState可以為函陣列件提供狀態
當我們想要在函陣列件中，使用組件狀態時，就要使用 useState 這個Hook 了
useState的使用：
🎈1. 匯入useState
import {useState} from 'react'
🎈2.呼叫 useState 函式，傳入初始值，回傳狀態和修改狀態的函式
function App = ()=>{
//呼叫useState傳入初始值0 他回傳的是一個陣列
const stateArr = useState(0)
//第一個元素是我們定義的初始狀態
const state = stateArr [0]
//第二個元素是修改狀態的函式
const setState = stateArr [1]
}
我們一般用結構的方法直接定義：
function App = ()=>{
//呼叫useState傳入初始值0 他回傳的是一個陣列
//第一個元素是我們定義的初始狀態,第二個元素是修改狀態的函式
const [state,setState ] = useState(0)
}
🎈3.展示我們定義的狀態 ，并通過他提供的方法修改它
把 state顯示在頁面上 點擊按鈕讓他+1
import { useState } from 'react'
// useState 是hook，hook是use開頭的函式
const Count = () => {
const [state,setState ] = useState(0)
return (
<div>
//展示狀態值
<h1>useState Hook -> {state}</h1>
//點擊按鈕，讓狀態值 +1
<button onClick={() => setState(state + 1)}>+1</button>
</div>
)
}
💡補充：
useState唯一的引數就是初始 state，在上面的例子中，我們的計數器是從零開始的，所以初始 state 就是 0， 它可以是任意值（比如，數值、字串等）- 這個初始 state 引數只有在第一次渲染時會被用到，
- 我們每次使用setState更新狀態都會讓函陣列件重新運行
- 可以在一個組件中多次使用
useState
以前我們可能把它們叫做“無狀態組件”，但現在我們為它們引入了使用 React state 的能力，所以我們更喜歡叫它”函陣列件”
📌 Effect Hook（useEffect ）
Effect Hook 可以讓我們在函陣列件中執行副作用操作
如果你熟悉 React class 的生命周期函式，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函式的組合，
副作用：
- 對于react組件來說，除了渲染UI之外的其他操作，都可以稱之為副作用，
- 例如：資料（Ajax）請求、手動修改 DOM、開啟定時器，清空定時器，添加事件監聽，洗掉事件, localStorage 操作等
執行時機：
- render作業完成之后，執行Effect
- 如果定義了多個，則順序執行
useEffect的基本使用：
🎈1. 匯入useEffect
import { useEffect } from 'react'
🎈2.使用
useEffect(() => {
console.log('useEffect 1 執行了,可以做副作用')
})
useEffect(() => {
console.log('useEffect 2 執行了,可以做副作用')
})
useEffect的完整格式：
我們先了解useEffect里的其他引數
🏮副作用函式的回傳值
🎈格式：
useEffect(() => {
// 副作用函式的內容
return 副作用函式的回傳值
}, [])
副作用函式的回傳值是可選的，可省略，也可以回傳一個清理函式，用來清理副作用
useEffect(() => {
// 副作用函式的內容
return （）=>{ /* 做清理作業*/ } // 清理函式
}, [])
🎈清理函式的執行時機：
- 清理函式會在組件卸載時以及下一次副作用函式呼叫之前執行
🏮useEffect的兩個引數：
-
引數1： 副作用函式，
-
引數2：執行副作用函式的依賴項：它決定了什么時機執行引數1（副作用函式）
🎈情況1：不帶第二個引數（基本使用就是這種寫法），
useEffect(() => {
console.log('useEffect 1 執行了,可以做副作用')
})
執行時機：掛載時執行一次 ，每次更新之后都要執行
🎈情況2：帶第二個引數，引數是空陣列，
useEffect(() => {
// 副作用函式的內容
}, [])
執行時機：只掛載時執行第一次
使用場景：
- 事件系結
- 發送請求獲取資料 等，
🎈情況3：帶第二個引數（陣列格式），并指定了依賴項，
useEffect(() => {
// 副作用函式的內容
}, [依賴項1,依賴項2,....])
執行時機：
- 掛載時執行一次
- 依賴項的值變化了，執行一次
這里的依賴項就是組件中定義的狀態，
🎈情況4：依賴項為空，沒有具體的副作用函式，有副作用函式的清理函式
useEffect(() => {
return () => {
// 副作用函式的清理函式
}, [])
模擬componentWillUnMount
執行時機： 組件卸載時執行
還有其他幾個使用頻率稍低的Hook函式 我有時間加上
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357130.html
標籤：其他