您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“React中的useContext怎么使用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“React中的useContext怎么使用”吧!
全局變量就是全局的上下文,全局都可以訪問到它;上下文就是你運行一段代碼,所要知道的所有變量
使用createContext創(chuàng)建并初始化
const C = createContext(null);
在圈定的范圍內(nèi),傳入讀操作和寫操作對象,然后可以使用上下文
<C.Provider value={{n,setN}}> 這是爺爺 <Baba></Baba> </C.Provider>
使用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í)行代碼了。
到此,相信大家對“React中的useContext怎么使用”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。