React hooks使用規(guī)則和作用

更新時(shí)間：2023年03月14日 08:52:55 作者：旺仔好吃糖

這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

只能在函數(shù)最外層調(diào)用 Hook。不要在循環(huán)、條件判斷或者子函數(shù)中調(diào)用。
只能在 React 的函數(shù)組件中調(diào)用 Hook。不要在其他 JavaScript 函數(shù)中調(diào)用。（還有一個(gè)地方可以調(diào)用 Hook —— 就是自定義的 Hook 中

useState(保存組件狀態(tài))

語法：

//導(dǎo)入 useState
import React,{useState}from 'react'
..........................................
const [state,setState] = useState(initialState)

內(nèi)容

返回一個(gè)state,以及修改state的函數(shù)，在初始渲染期間，返回的狀態(tài)state與傳入的第一個(gè)參數(shù)值 initialState值相同
setState函數(shù)用于更新 state。它接收一個(gè)新的參數(shù),并將組件的一次重新渲染加入隊(duì)列。
可以在一個(gè)組件中多次使用

修改state

//setState(newState)
setState('123')

useEffect(處理副作用)

使用useEffect

在函數(shù)組件中，要知道這個(gè)組件現(xiàn)在處在那個(gè)生命周期，比較麻煩，甚至有點(diǎn)無從下手，這時(shí)候我們就可以使用hook中的useEffect()

注意：

Function Component不存在生命周期，所以不要把Class Component 的生命周期概念搬過來試圖對(duì)號(hào)入座
默認(rèn)情況下,useEffect會(huì)在第一次渲染之后和每次更新之前都會(huì)執(zhí)行

語法

useEffect(()=>{
    .........
},[依賴;空數(shù)組，表示不依賴])
//依賴：在useEffect函數(shù)中使用的狀態(tài)

注意:如果明明使用了某個(gè)變量，卻沒有申明在依賴中，那么當(dāng)依賴的變量改變時(shí)，useEffect也不會(huì)再次執(zhí)行，控制臺(tái)會(huì)報(bào)警告

清除effect

組件卸載時(shí)需要清除effect創(chuàng)建的如計(jì)時(shí)器或請閱等資源，useEffect函數(shù)需要返回一個(gè)清除函數(shù)即可

useEffect(()=>{
   //組件掛載創(chuàng)建計(jì)時(shí)器
    var timer = setInterval(()=>{
            console.log('111');
   },1000)
    ........
   return ()=>{
       //清除計(jì)時(shí)器  若無依賴時(shí)組件銷毀
       clearInterval(timer)
   } 
},[])

useCallback(記憶函數(shù))

防止因?yàn)榻M件重新渲染，導(dǎo)致方法被重新創(chuàng)建，起到緩存作用，只有第二個(gè)參數(shù)變化了，才能重新聲明一次

語法

var handleClick = useCallback(
    ()=>{
        console.log(name)
    },
    [name]
)
<button onClick={()=>handleClick()}>hello</button>

內(nèi)容

當(dāng)依賴不改變時(shí)，方法不會(huì)被重建；當(dāng)只有當(dāng)依賴（name）發(fā)生改變時(shí)，這個(gè)函數(shù)才會(huì)被重新創(chuàng)建
如果傳入空數(shù)組，name就是第一次創(chuàng)建后就被緩存，name后期即使改變，拿到的還是老的name
如果不傳第二個(gè)參數(shù)，每次都會(huì)被重新聲明一次，拿到的就是最新的name

useMemo(記憶組件)

useCallback常用記憶事件函數(shù)，生成記憶后的事件函數(shù)并傳遞給子組件使用。而useMemo更適合經(jīng)過函數(shù)計(jì)算得到一個(gè)確定的值，比如記憶組件

useCallback的功能完全可以由useMemo取代

useMemo(() => fn,inputs)

區(qū)別:useCallback不會(huì)執(zhí)行第一個(gè)參數(shù)函數(shù)，而是將他返回給你，而useMemo會(huì)執(zhí)行第一個(gè)函數(shù)并且將函數(shù)執(zhí)行結(jié)果返回給你

useRef(保存引用值)

//相當(dāng)于React.createRef()
const mytext = useRef()
................
 <input ref={mytext}></input>

useContext

語法

const GlobalContext = React.createContext()//創(chuàng)建context對(duì)象

內(nèi)容

??????收一個(gè)context對(duì)象（React.createContext的返回值）并返回該context的當(dāng)前值。當(dāng)前的context值由上次組件中距離當(dāng)前組件最近的的value *<GlobalContext.Provider> *的value prop決定

實(shí)例

//創(chuàng)建context對(duì)象
const GlobalContext = React.createContext()//創(chuàng)建context對(duì)象
..................................
//GlobalContext.Provider的value
 <GlobalContext.Provider value={{
           "call":"打電話"
}}>
//GlobalContext.Consumer通過context獲得value
Function FilmDetail(){
    const value = useContext(GlobalContext)
    return(
            <div className="filmDetail">
                detail-{value.info}
            </div>
       )
}

useReducer

可以在外部管理狀態(tài),只能在函數(shù)組件中調(diào)用

語法

定義useReducer

組件內(nèi)部:
//intialState初始狀態(tài)值 state拿到狀態(tài)值，dispatch改變狀態(tài)
const [state,dispatch] = useReducer(reducer,intialState)

定義在外部處理函數(shù)

//處理函數(shù)
const reducer=(prevState,action)=>{
    //prevState--老的狀態(tài)
    //action--dispatch內(nèi)對(duì)象
    return prevState/newState
}

??????return 出新狀態(tài) 組件內(nèi)部即可通過 state獲得全新的狀態(tài)

定義在外部的狀態(tài)

組件外部:
//定義在外部的狀態(tài)
const intialState={
    //放入初始狀態(tài)值
}

useContext與useReducer實(shí)現(xiàn)跨組件傳值

實(shí)現(xiàn)的效果

在App父組件中使用useReducter在外部管理所有子組件的狀態(tài)，使用useContext將dispatch處理函數(shù)以及initailState狀態(tài)傳遞給子組件(Child1,Child2,Child3)，Child1使用useContext獲得傳入的dispatch，Child2、Child3獲得傳入的state,此時(shí)Child1觸發(fā)dispatch()來改變state的值（a、b）,而后Child2、Child3將獲得Child1修改后的最新的state值

引入useContext和useReducer

import React,{useReducer,useContext}from 'react'
//創(chuàng)建context
const GlobalContext = React.createContext()//創(chuàng)建context對(duì)象

useReducer實(shí)現(xiàn)使用外部狀態(tài)管理數(shù)據(jù)，useContext實(shí)現(xiàn)組件間傳數(shù)據(jù)

定義外部狀態(tài)及處理函數(shù)

const initailState = {
    a:'1111',
    b:'1111'
}
const reducer = (prevState,action)=>{
    let newState = {...prevState}
    switch(action.type){
        case "change-a":
            newState.a = action.value
            return newState
        case "change-b":
            newState.b = action.value
            return newState
        default:
            return prevState
    }
}

action為接收到的diapatch函數(shù)，switch語句是根據(jù)dispatch中的type值的不同，修改a、b（不能直接修改）

父組件

export default function App() {
  const [state,dispatch] = useReducer(reducer,initailState)
  return (
    <GlobalContext.Provider value={
        {
            state,
            dispatch
        }
    }>
        <div>
            <Child1></Child1>
            <Child2></Child2>
            <Child3></Child3>
        </div>
    </GlobalContext.Provider>
  )
}

Child1獲得dispatch，Child2、Child3獲得state

Child1修改state

function Child1(){
    const {dispatch} = useContext(GlobalContext)
    return(
        <div style={{background:'gray'}}>
            <button onClick={()=>{
                dispatch({
                    type:"change-a",
                    value:'22222'
                })
            }}>改變a</button>
            <button onClick={()=>{
                dispatch({
                    type:"change-b",
                    value:'33333'
                })
            }}>改變b</button>
        </div>
    )
}

觸發(fā)dispatch函數(shù)，傳入reducer，實(shí)現(xiàn)間接修改state

Child2、Child3獲得最新的state

function Child2(){
    const {state} = useContext(GlobalContext)
    return(
        <div style={{background:'yellow'}}>
            child2-{state.a}
        </div>
    )
}
function Child3(){
    const {state} = useContext(GlobalContext)
    return(
        <div style={{background:'blue'}}>
            child3-{state.b}
        </div>
    )
}