React Hooks常用鉤子及基本原理解讀

更新時間：2023年10月26日 09:04:14 作者：綠足

這篇文章主要介紹了React Hooks常用鉤子及基本原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一. 簡述

在以往的react16.8前，我們React組件創(chuàng)建方式基本包含兩種方式： 類組件，純函數(shù)組件。

React 團(tuán)隊希望組件最佳寫法應(yīng)該是函數(shù)，而不是類。

然而常規(guī)的純函數(shù)組件有以下特點：

沒有狀態(tài)
沒有生命周期
沒有 this

因存在如上特點，使得純函數(shù)組件只能做UI展示的功能，涉及到狀態(tài)的管理與切換就不得不用到類組件或這redux。

但因為簡單的頁面也是用類組件，同時要繼承一個React實例，使得代碼會顯得很重。

‘Hooks’ 單詞意思為：鉤子。

React Hooks 意思是：組件盡量寫成純函數(shù)，如果需要外部功能和副作用，就用鉤子把外部代碼“鉤”進(jìn)來。

React Hooks常用鉤子有如下四種：

useState()
useContext()
useReducer()
useEffect()

使用hooks 我們會發(fā)現(xiàn)沒有了繼承，渲染邏輯，生命周期等，代碼看起來更加的輕便簡潔了。

React 約定，鉤子一律使用 use 前綴命名（自定義鉤子都命名為：useXXXX）

二. 常用舉例及原理分析

useState 狀態(tài)鉤子

官方示例：

import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  const addcount = () => {
    let newCount = count
    setCount(newCount+=1)
  } 
  return (
    <>
      <p>{count}</p>
      <button onClick={addcount}>count++</button>
    </>
  )
}

原理：

// 我們實現(xiàn)一個簡易版的useState
let memoizedStates = [ ]  // 多個useState 時需要使用數(shù)組來存
let index = 0
function useState (initialState) {
   memoizedStates[index] = memoizedStates[index] || initialState
   let currentIndex = index;
   function setState (newState) {
      memoizedStates[currentIndex] = newState
      render()
   }
   return [memoizedStates[index++], setState]
}

useContext 共享狀態(tài)鉤子

該鉤子的作用是，在組件之間共享狀態(tài)。

可以解決react逐層通過Porps傳遞數(shù)據(jù)。

import React,{ useContext } from 'react'
const ShareContext= () => {
  const AppContext = React.createContext({})
  const A =() => {
    const { name } = useContext(AppContext)
    return (
        <p>我是A組件的名字{name}<span>我是A的子組件{name}</span></p>
    )
}
const B =() => {
  const { name } = useContext(AppContext)
  return (
      <p>我是B組件的名字{name}</p>
  )
}
  return (
    <AppContext.Provider value={{name: 'hook測試'}}>
    <A/>
    <B/>
    </AppContext.Provider>
  )
}
export default ShareContext

useContext（context）是針對 context (上下文) 提出的api。

它接受React.createContext()的返回結(jié)果作為參數(shù)（也就是context對象并返回最近的context）。

使用useContext將不再需要Provider 和 Consumer。

當(dāng)最近的context更新時，那么使用該context的hook將會重新渲染。

useReducer(): Action 鉤子

React本身不提供狀態(tài)管理。

而useReducer() 提供了狀態(tài)管理。

其基本原理是通過用戶在頁面中發(fā)起action, 從而通過reducer方法來改變state, 從而實現(xiàn)頁面和狀態(tài)的通信。

import React,{useReducer} from 'react'

const MyReducer= () => {
const reducer = (state, action) =>  {
 if(action.type === ''add){
  return {
  ...state,
  count: state.count +1,
  }
 }else {
   return state
  }
 }
const addcount = () => { 
  dispatch({
    type: 'add'
  })
 }
const [state, dispatch] = useReducer(reducer, {count: 0})
return (
<>
<p>{state.count}</p>
<button onClick={addcount}>count++</button>
</>
)
}
export default MyReducer

使用useReducer() 代替了Redux的功能，但useReducer 無法提供中間件等功能。

useEffect(): 副作用鉤子

React常規(guī)開發(fā)中，我們習(xí)慣將一些處理副作用的操作，如：異步請求等放在特定的生命周期中。

useEffect 則是為函數(shù)組件提供了副作用的鉤子。

useEffect() ：接收兩個參數(shù)，第一個是進(jìn)行的異步操作，第二個是數(shù)組，用來給出Effect的依賴項。

第二個參數(shù)（數(shù)組）發(fā)生變化， ==useEffect()==就會執(zhí)行。

第二項不填時， useEffect（）會在每次組件渲染時執(zhí)行。

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

const AsyncPage = ({name}) => {
const [loading, setLoading] = useState(true)
const [person, setPerson] = useState({})
//  useEffect 類似compomnetDidMount 初始化會執(zhí)行，更新時會執(zhí)行
  useEffect(() => {
    setLoading(true)
    setTimeout(()=> {
      setLoading(false)
      setPerson({name})
    },3000)
  },[name])
  return (
    <div>
      {loading?<p>Loading...</p>:<p>{person.name}</p>}
    <div/>
  )
}

const PersonPage = () =>{
  const [state, setState] = useState('')
  const changeName = (name) => {
    setState(name)
  }
  return (
    <>
      <AsyncPage name={state}/>
      <button onClick={() => {changeName('名字1')}}>名字1</button>
      <button onClick={() => {changeName('名字2')}}>名字2</button>
    </>
  )
}

export default PersonPage

創(chuàng)建自己的Hooks

有時候我們需要創(chuàng)建自己想要的Hooks，來滿足更便捷的開發(fā)。

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

const usePerson = (name) => {
const [loading, setLoading] = useState(true)
const [person, setPerson] = useState({})

  useEffect(() => {
    setLoading(true)
    setTimeout(()=> {
      setLoading(false)
      setPerson({name})
    },2000)
  },[name])
  return [loading,person]
}

const AsyncPage = ({name}) => {
  const [loading, person] = usePerson(name)
    return (
      <div>
        {loading?<p>Loading...</p>:<p>{person.name}</p>}
      </div>
    )
  }

const PersonPage = () =>{
  const [state, setState]=useState('')
  const changeName = (name) => {
    setState(name)
  }
  return (
    <div>
      <AsyncPage name={state} />
      <button onClick={() => {changeName('名字1')}}>名字1</button>
      <button onClick={() => {changeName('名字2')}}>名字2</button>
    </div>
  )
}

export default PersonPage

上面自定義了一個Hooks, 它接受一個字符串，返回一個數(shù)組，數(shù)組中的兩個狀態(tài)在使用usePerson() 時，會根據(jù)傳入的不同反而返回不同的狀態(tài)。