React中的useContext使用方法.docx

第

React中的useContext使用方法

目录什么是上下文呢？useContext使用的方法:1.要先创建createContex2.Provider指定使用的范围3.最后使用useContextuseContext就是上下文

什么是上下文呢？

全局变量就是全局的上下文，全局都可以访问到它；上下文就是你运行一段代码，所要知道的所有变量

useContext使用的方法:

1.要先创建createContex

使用createContext创建并初始化

constC=createContext(null);

2.Provider指定使用的范围

在圈定的范围内，传入读操作和写操作对象，然后可以使用上下文

C.Providervalue={{n,setN}}

这是爷爷

Baba/Baba

/C.Provider

3.最后使用useContext

使用useContext接受上下文，因为传入的是对象，则接受的也应该是对象

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

案例：在孙子组件中使用爷爷组件中定义的变量n,并且进行+1操作

importReact,{createContext,useContext,useReducer,useState}fromreact

importReactDOMfromreact-dom

//创造一个上下文

constC=createContext(null);

functionApp(){

const[n,setN]=useState(0)

return(

//指定上下文使用范围，使用provider,并传入读数据和写入据

C.Providervalue={{n,setN}}

这是爷爷

Baba/Baba

/C.Provider

functionBaba(){

return(

div

这是爸爸

Child/Child

/div

functionChild(){

//使用上下文，因为传入的是对象，则接受也应该是对象

const{n,setN}=useContext(C)

constadd=()={

setN(n=n+1)

return(

div

这是儿子:n:{n}

buttonadd}+1/button

/div

ReactDOM.render(App/,document.getElementById(root));

使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，而不是通过数据响应式来监控变量的。

也就是说在点击+1操作后，React开始从functionApp开始执行代码了