React?Hooks如何使用

這篇文章主要介紹了React Hooks如何使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React Hooks如何使用文章都會有所收獲，下面我們一起來看看吧。

hooks介紹

在react類組件（class）寫法中，有setState和生命周期對狀態進行管理，但是在函數組件中不存在，因此引入hooks

React的組件創建方式，一種是類組件，一種是純函數組件，并且React團隊希望，組件不要變成復雜的容器，最好只是數據流的管道。開發者根據需要，組合管道即可。也就是說組件的最佳寫法應該是函數，而不是類。

使用hooks理由

• 高階組件為了復用，導致代碼層級復雜

• 生命周期的復雜

• 寫成functional組件,無狀態組件 ，因為需要狀態，又改成了class,成本高

類組件與函數組件的區別：

• 函數組件沒有生命周期，類組件有（掛載、更新、銷毀）

• 函數組件沒有狀態（state），類組件有

• 函數組件沒有this，類組件有

useState(保存組件狀態)

純函數組件沒有狀態，useState()用于設置和使用組件的狀態屬性

const [state, setstate] = useState(initialState)
//state:初始狀態屬性，指向狀態當前值
//setstate:修改狀態屬性函數，用來更新狀態
//initialState:狀態的初始值，該值會賦給state

state是一個對象：

setState()不會局部更新

useEffect()

useEffect()是副作用的鉤子，可以檢測數據更新 ,可以實現特定的功能，如異步請求

• useEffect()接受兩個參數，第一個參數是你要進行的異步操作，第二個參數是一個數組，用來給出Effect()的依賴項。

• 只要數組發生改變，useEffect()就會執行。

• 當第二項省略不填時，useEffect()會在每次組件渲染時執行，這一點類似于componentDidMount。

useEffect(() => {
//effect
return () => {
//cleanup
};
}, [依賴的狀態;空數組,表示不依賴])

不要對 Dependencies 撒謊,如果你明明使用了某個變量，卻沒有申明在依賴中，你等于向 React撒了謊，后果就是，當依賴的變量改變時，useEffffect也不會再次執行, eslint會報警告

useEffffect和useLayoutEffffect區別： 

簡單來說就是調用時機不useLayoutEffect() 和原來componentDidMount &componentDidUpdate

一致，在react完成DOM更新后馬上同步調用的代碼，會阻塞頁面渲染。而 useEffect() 是會在整個頁面渲染完才會異步調用。

在實際使用時如果想避免頁面抖動（在 useEffect 里修改DOM很有可能出現）的話，可以把需要操作DOM的代碼放useLayoutEffect 里。在這里做點dom操作，這些dom修改會和 react 做出的更改一起被一次性渲染到屏幕上

useCallback(記憶函數)

防止因為組件重新渲染，導致方法被重新創建，起到緩存作用;只有第二個參數 變化了，才重新聲明一次

var handleClick = useCallback(()=>{
console.log(name)
},[name])
<button onClick={()=>handleClick()}>hello</button>
//只有name改變后， 這個函數才會重新聲明一次，
//如果傳入空數組， 那么就是第一次創建后就被緩存， 如果name后期改變了,拿到的還是老的name。
//如果不傳第二個參數，每次都會重新聲明一次，拿到的就是最新的name.

useMemo(記憶組件)

useCallback() 的功能完全可以由 useMemo() 所取代，使用 useMemo() 也可以返回一個記憶函數

useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs).

useCallback()與useMemo()的區別：

• useCallback 不會執行第一個參數函數，而是將它返回給你，而useMemo會執行第一個函數并且將函數執行結果返回給你。

• useCallback() 常用記憶事件函數，生成記憶后的事件函數并傳遞給子組件使用。而 useMemo() 更適合經過函數

useRef(保存引用值)

用于在函數組件中獲取真實的DOM元素對象或者是組件實例。（因為函數組件沒有實例，所以這里的獲取組件實例指的是獲取類組件實例）

返回值是一個可變的ref對象，并且這個對象的值發生改變時不會引起頁面的渲染。

const myswiper = useRef(null);
<Swiper ref={myswipe}/

useRef()可以存儲不需要引起頁面渲染的數據；修改useRef值的唯一方法是修改.current，且修改后不會引起重渲染。

useReducer

在使用React的過程中，如遇到狀態管理，一般會用到Redux，而React本身是不提供狀態管理的。而useReducer()提供了狀態管理

useState() 的替代方案，用于包含多種狀態，或者下一個 state 依賴于之前的 state，實現函數組件的狀態管理。

基本原理是通過用戶在頁面中發起action, 從而通過reducer方法來改變state, 從而實現頁面和狀態的通信。

useContext(減少組件層級)

useContext()可以共享狀態，作用是進行狀態的分發,避免了使用Props進行數據的傳遞

import React from 'react'
var GlobalContext= React.createContext()
// 注意此時的reduecer 返回值是一個對象 {isShow:false,list:[]}
function App(props){
let [state,dispatch] = useReducer(reducer,{isShow:true,list:[]})
return <GlobalContext.Provider value={{
dispatch
}}>
<div>
{
state.isShow?
<div >我是選項卡</div>
:null
}
{props.children}
</div>
</GlobalContext.Provider>
}
function Detail(){
var {dispatch} = useContext(GlobalContext)
useEffect(() => {
//隱藏
dispatch({
type:"Hide",
payload:false
})
return () => {
//顯示
dispatch({
type:"Show",
payload:true
})
};
}, [])
return <div>
detail
</div>
}

自定義hooks

當我們想在兩個函數之間共享邏輯時，我們會把它提取到第三個函數中。

用戶自定義的Hooks：

• 命名的要求：用use開頭，后跟名稱（首字母大寫）

• 作用：根據具體業務的需求，對Hooks中默認的鉤子函數進行封裝，使代碼的結構更加清晰，便于使用和維護

import React, { useEffect, useState } from 'react'
function useToLocaleUpperCase(text) {
    const [name, setName] = useState(text)
    useEffect(() => {
        setName(name.toLocaleUpperCase())
    }, [])
    return { name };
}
export default function App() {
    const { name } = useToLocaleUpperCase('zhansan')
 
    return (
        <div>App-{name}
            <Child></Child>
        </div>
    )
}
function Child() {
    const { name } = useToLocaleUpperCase('lisi')
    return (
        <div>App-{name}</div>
    )
}

關于“React Hooks如何使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“React Hooks如何使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。