React Hooks - useContetx和useReducer的使用實(shí)例詳解

更新時(shí)間：2022年11月23日 10:03:48 作者：藍(lán)桉cyq

這篇文章主要介紹了React Hooks - useContetx和useReducer的基本使用,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

useContetx的使用

在之前的開(kāi)發(fā)中，我們要在組件中使用共享的Context有兩種方式:

類組件可以通過(guò) 類名.contextType = MyContext 的方式，在類中獲取context;

多個(gè)Context或者在函數(shù)式組件中通過(guò) MyContext.Consumer 方式共享context;

但是多個(gè)Context共享時(shí)的方式會(huì)存在大量的嵌套(會(huì)導(dǎo)致代碼閱讀性非常差):

Context Hook允許我們通過(guò)Hook來(lái)直接獲取某個(gè)Context的值, 相對(duì)于class組件中的使用方式會(huì)簡(jiǎn)單非常多;

例如定義兩個(gè)Context

import { createContext } from "react";

const InfoContext = createContext()
const ThemeContext = createContext()

export {
  InfoContext,
  ThemeContext
}

依然需要使用InfoContext和ThemeContext將組件包裹起來(lái)

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
  <InfoContext.Provider value={{name: "chenyq", age: 18}}>
    <ThemeContext.Provider value={{color: "red"}}>
      <App/>
    </ThemeContext.Provider>
  </InfoContext.Provider>
)

在要使用的地方, 通過(guò)useContetx這個(gè)hook函數(shù)可以直接獲取到值

import React, { memo } from 'react'
import { useContext } from 'react'
import { InfoContext, ThemeContext } from './index'

const App = memo(() => {
  // 通過(guò)hook拿到共享的數(shù)據(jù)
  const info = useContext(InfoContext)
  const theme = useContext(ThemeContext)
  return (
    <div>
      {/* 展示共享的數(shù)據(jù) */}
      <h2>{info.name}-{info.age}</h2>
      <h2>{theme.color}</h2>
    </div>
  )
})

export default App

注意事項(xiàng):

當(dāng)組件上層最近的 <MyContext.Provider> 更新時(shí)，該 Hook 會(huì)觸發(fā)重新渲染，并使用最新的值傳遞給 MyContext provider 的 context value 值。

useReducer的使用

很多人看到useReducer的第一反應(yīng)應(yīng)該是redux的某個(gè)替代品，其實(shí)并不是。

useReducer僅僅是useState的一種替代方案:

在某些場(chǎng)景下，如果state的處理邏輯比較復(fù)雜，我們可以通過(guò)useReducer來(lái)對(duì)其進(jìn)行拆分;

或者這次修改的state需要依賴之前的state時(shí)，也可以使用;

useReducer函數(shù)使用過(guò)程如下:

例如我們先定義一個(gè)reducer函數(shù)

// 定義一個(gè)reducer函數(shù)
function reducer(state, action) {
  switch(action.type) {
    case "incremment":
      return {...state, counter: state.counter + action.num}
    case "decremment":
      return {...state, counter: state.counter - action.num}
    default: 
      return state
  }
}

再在函數(shù)組件中通過(guò)useReducer函數(shù)將我們定義的reducer函數(shù)使用起來(lái)

import React, { memo } from 'react'
import { useReducer } from 'react'

// 定義一個(gè)reducer函數(shù)
function reducer(state, action) {
  switch(action.type) {
    case "incremment":
      return {...state, counter: state.counter + action.num}
    case "decremment":
      return {...state, counter: state.counter - action.num}
    default: 
      return state
  }
}

// 函數(shù)組件
const App = memo(() => {
  // 第一個(gè)參數(shù)傳reducer, 第二個(gè)參數(shù)初始化值
  const [state, dispatch] = useReducer(reducer, { counter: 0 })

  return (
    <div>
      {/* 使用reducer函數(shù)中的state */}
      <h2>當(dāng)前計(jì)數(shù): {state.counter}</h2>
      {/* 派發(fā)action通過(guò)reducer函數(shù)修改counter */}
      <button onClick={() => dispatch({type: "incremment", num: 5})}>+5</button>
      <button onClick={() => dispatch({type: "decremment", num: 5})}>-5</button>
    </div>
  )
})

export default App

數(shù)據(jù)是不會(huì)共享的，它們只是使用了相同的counterReducer的函數(shù)而已。

所以，useReducer只是useState的一種替代品，并不能替代Redux。

到此這篇關(guān)于React Hooks - useContetx和useReducer的基本使用的文章就介紹到這了,更多相關(guān)React Hooks基本使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: