React中的useContext怎么使用

本篇內容主要講解“React中的useContext怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React中的useContext怎么使用”吧!

什么是上下文呢？

全局變量就是全局的上下文，全局都可以訪問到它；上下文就是你運行一段代碼，所要知道的所有變量

useContext使用的方法:

1.要先創建createContex

使用createContext創建并初始化

const C = createContext(null);

2.Provider 指定使用的范圍

在圈定的范圍內，傳入讀操作和寫操作對象，然后可以使用上下文

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

3.最后使用useContext

使用useContext接受上下文，因為傳入的是對象，則接受的也應該是對象

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

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

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

// 創造一個上下文
const C = createContext(null);

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

function Baba(){
  return(
    <div>
      這是爸爸
      <Child></Child>
    </div>
  )
}
function Child(){
  // 使用上下文，因為傳入的是對象，則接受也應該是對象
  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在改變一個數據時，是通過自己逐級查找對比改變的數據然后渲染，而不是通過數據響應式來監控變量的。也就是說在點擊+1操作后，React開始從function App開始執行代碼了。

到此，相信大家對“React中的useContext怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！