本篇内容主要讲解“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怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是云搜网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
