這篇文章主要介紹了React中的useContext使用,使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過(guò)自己逐級(jí)查找對(duì)比改變的數(shù)據(jù)然后渲染，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

什么是上下文呢？

全局變量就是全局的上下文，全局都可以訪(fǎng)問(wèn)到它；上下文就是你運(yùn)行一段代碼，所要知道的所有變量

useContext使用的方法:

1.要先創(chuàng)建createContex

使用createContext創(chuàng)建并初始化

const C = createContext(null);

2.Provider 指定使用的范圍

在圈定的范圍內(nèi)，傳入讀操作和寫(xiě)操作對(duì)象，然后可以使用上下文

    <C.Provider value={{n,setN}}>
      這是爺爺
      <Baba></Baba>
    </C.Provider>

3.最后使用useContext

使用useContext接受上下文，因?yàn)閭魅氲氖菍?duì)象，則接受的也應(yīng)該是對(duì)象

const {n,setN} = useContext(C)；

案例：在孫子組件中使用爺爺組件中定義的變量n,并且進(jìn)行+1操作

import React, { createContext, useContext, useReducer, useState } from 'react'
import ReactDOM from 'react-dom'

// 創(chuàng)造一個(gè)上下文
const C = createContext(null);

function App(){
  const [n,setN] = useState(0)
  return(
    // 指定上下文使用范圍，使用provider,并傳入讀數(shù)據(jù)和寫(xiě)入據(jù)
    <C.Provider value={{n,setN}}>
      這是爺爺
      <Baba></Baba>
    </C.Provider>
  )
}

function Baba(){
  return(
    <div>
      這是爸爸
      <Child></Child>
    </div>
  )
}
function Child(){
  // 使用上下文，因?yàn)閭魅氲氖菍?duì)象，則接受也應(yīng)該是對(duì)象
  const {n,setN} = useContext(C)
  const add=()=>{
    setN(n=>n+1)
  };
  return(
    <div>
      這是兒子:n:{n}
      <button onClick={add}>+1</button>
    </div>
  )
}
ReactDOM.render(<App />,document.getElementById('root'));

使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過(guò)自己逐級(jí)查找對(duì)比改變的數(shù)據(jù)然后渲染，而不是通過(guò)數(shù)據(jù)響應(yīng)式來(lái)監(jiān)控變量的。

也就是說(shuō)在點(diǎn)擊+1操作后，React開(kāi)始從function App開(kāi)始執(zhí)行代碼了

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

您可能感興趣的文章: