React 中的 useContext使用方法_React_

useContext就是上下文

什么是上下文呢？

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

useContext使用的方法:

1.要先创建createContex

使用createContext创建并初始化

const C = createContext(null); 

2.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,并传入读数据和写入据  这是爷爷  ) } function Baba(){ return( 
 这是爸爸 
 ) } function Child(){ // 使用上下文，因为传入的是对象，则接受也应该是对象 const {n,setN} = useContext(C) const add=()=>{ setN(n=>n+1) }; return( 
 这是儿子:n:{n} +1
 ) } ReactDOM.render(,document.getElementById('root'));

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

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

到此这篇关于React 的 useContext 的使用的文章就介绍到这了,更多相关React useContext 使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！