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

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

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

一. 簡(jiǎn)述

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

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

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

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

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

但因?yàn)楹?jiǎn)單的頁(yè)面也是用類組件，同時(shí)要繼承一個(gè)React實(shí)例，使得代碼會(huì)顯得很重。

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

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

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

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

使用hooks 我們會(huì)發(fā)現(xiàn)沒有了繼承，渲染邏輯，生命周期等，代碼看起來更加的輕便簡(jiǎ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>
    </>
  )
}

原理：

// 我們實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的useState
let memoizedStates = [ ]  // 多個(gè)useState 時(shí)需要使用數(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測(cè)試'}}>
    <A/>
    <B/>
    </AppContext.Provider>
  )
}
export default ShareContext

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

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

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

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

useReducer(): Action 鉤子

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

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

其基本原理是通過用戶在頁(yè)面中發(fā)起action, 從而通過reducer方法來改變state, 從而實(shí)現(xiàn)頁(yè)面和狀態(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í)慣將一些處理副作用的操作，如：異步請(qǐng)求等放在特定的生命周期中。

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

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

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

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

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

const AsyncPage = ({name}) => {
const [loading, setLoading] = useState(true)
const [person, setPerson] = useState({})
//  useEffect 類似compomnetDidMount 初始化會(huì)執(zhí)行，更新時(shí)會(huì)執(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

有時(shí)候我們需要?jiǎng)?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

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

React Hooks 概要及未來

根據(jù)官方文檔的說法：

完全可選

100%向后兼容 (Hook 不會(huì)含任何破壞性改動(dòng))
現(xiàn)在可用（Hook 已發(fā)布于 v16.8.0）
沒有計(jì)劃從React中移除class
Hook不會(huì)影響對(duì)React概念的理解（Hook 為React提供了相關(guān)API：props, state，context, refs以及生命周期）