React 中的 useContext使用方法
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 的使用的文章就介紹到這瞭,更多相關React useContext 使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 30分鐘帶你全面瞭解React Hooks
- React中10種Hook的使用介紹
- React全局狀態管理的三種底層機制探究
- 基於React Context實現一個簡單的狀態管理的示例代碼
- React中的Context應用場景分析