React 中的 useContext使用方法
更新時間：2022年08月19日 16:40:55 作者：wx-18538561085
這篇文章主要介紹了React中的useContext使用,使用useContext在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
useContext就是上下文
什么是上下文呢？
全局變量就是全局的上下文，全局都可以訪問到它；上下文就是你運行一段代碼，所要知道的所有變量
useContext使用的方法:
1.要先創(chuàng)建createContex
使用createContext創(chuàng)建并初始化
const C = createContext(null);
2.Provider 指定使用的范圍
在圈定的范圍內(nèi)，傳入讀操作和寫操作對象，然后可以使用上下文
<C.Provider value={{n,setN}}>
這是爺爺
<Baba></Baba>
</C.Provider>3.最后使用useContext
使用useContext接受上下文，因為傳入的是對象，則接受的也應(yīng)該是對象
const {n,setN} = useContext(C)；
案例：在孫子組件中使用爺爺組件中定義的變量n,并且進(jìn)行+1操作
import React, { createContext, useContext, useReducer, useState } from 'react'
import ReactDOM from 'react-dom'
// 創(chuàng)造一個上下文
const C = createContext(null);
function App(){
const [n,setN] = useState(0)
return(
// 指定上下文使用范圍，使用provider,并傳入讀數(shù)據(jù)和寫入據(jù)
<C.Provider value={{n,setN}}>
這是爺爺
<Baba></Baba>
</C.Provider>
)
}
function Baba(){
return(
<div>
這是爸爸
<Child></Child>
</div>
)
}
function Child(){
// 使用上下文，因為傳入的是對象，則接受也應(yīng)該是對象
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在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，而不是通過數(shù)據(jù)響應(yīng)式來監(jiān)控變量的。
也就是說在點擊+1操作后，React開始從function App開始執(zhí)行代碼了
到此這篇關(guān)于React 的 useContext 的使用的文章就介紹到這了,更多相關(guān)React useContext 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React中異步數(shù)據(jù)更新不及時問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了react中用less的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-04-04
如何使用 React Router v6 在 React 中
面包屑在網(wǎng)頁開發(fā)中的角色不可忽視,它們?yōu)橛脩籼峁┝艘环N跟蹤其在網(wǎng)頁中當(dāng)前位置的方法,并有助于網(wǎng)頁導(dǎo)航,本文介紹了如何使用react-router v6和bootstrap在react中實現(xiàn)面包屑,感興趣的朋友一起看看吧2024-09-09
在React類組件中,生命周期方法是非常重要的概念,它們允許我們在組件的不同階段執(zhí)行代碼,這包括在組件掛載、更新以及卸載時執(zhí)行的生命周期方法,本文通過介紹React類組件中的生命周期方法,旨在幫助開發(fā)者深入理解組件的生命周期管理2024-11-11
本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信)，具有一定的參考價值，有興趣的同學(xué)可以了解一下2017-09-09
在當(dāng)前的Web開發(fā)中,使用React構(gòu)建單頁面應(yīng)用（SPA）已經(jīng)成為一種常見的做法,然而,當(dāng)應(yīng)用程序遇到錯誤時,有可能會導(dǎo)致整個頁面崩潰,給用戶帶來不好的體驗,本文將介紹如何在React單頁面應(yīng)用中捕獲錯誤,以防止整個頁面的崩潰,需要的朋友可以參考下2023-09-09
react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了react 生命周期,結(jié)合實例形式分析了react 生命周期基本原理、操作步驟與注意事項,需要的朋友可以參考下2020-05-05
本文主要介紹了react合成事件與原生事件的相關(guān)概念，幫助大家區(qū)分這兩種事件，學(xué)習(xí)react的同學(xué)不妨了解下2021-05-05
這篇文章主要介紹了使用React手寫一個對話框或模態(tài)框的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04