React 中的 useContext使用方法

更新时间：2022年08月19日 16:40:55 作者：wx-18538561085

这篇文章主要介绍了React中的useContext使用,使用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 的使用的文章就介绍到这了,更多相关React useContext 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React中异步数据更新不及时问题及解决
这篇文章主要介绍了React中异步数据更新不及时问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
react中用less的问题
本文主要介绍了react中用less的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2024-04-04
如何使用 React Router v6 在 React 中
面包屑在网页开发中的角色不可忽视,它们为用户提供了一种跟踪其在网页中当前位置的方法,并有助于网页导航,本文介绍了如何使用react-router v6和bootstrap在react中实现面包屑,感兴趣的朋友一起看看吧
2024-09-09
react类标签的生命周期详解
在React类组件中,生命周期方法是非常重要的概念,它们允许我们在组件的不同阶段执行代码,这包括在组件挂载、更新以及卸载时执行的生命周期方法,本文通过介绍React类组件中的生命周期方法,旨在帮助开发者深入理解组件的生命周期管理
2024-11-11
详解React native全局变量的使用(跨组件的通信)
本篇文章主要介绍了详解React native全局变量的使用(跨组件的通信)，具有一定的参考价值，有兴趣的同学可以了解一下
2017-09-09
详解如何在React单页面应用中捕获错误
在当前的Web开发中,使用React构建单页面应用（SPA）已经成为一种常见的做法,然而,当应用程序遇到错误时,有可能会导致整个页面崩溃,给用户带来不好的体验,本文将介绍如何在React单页面应用中捕获错误,以防止整个页面的崩溃,需要的朋友可以参考下
2023-09-09
react16.8.0以上MobX在hook中的使用方法详解
这篇文章主要为大家介绍了react16.8.0以上MobX在hook中的使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
react 生命周期实例分析
这篇文章主要介绍了react 生命周期,结合实例形式分析了react 生命周期基本原理、操作步骤与注意事项,需要的朋友可以参考下
2020-05-05
react合成事件与原生事件的相关理解
本文主要介绍了react合成事件与原生事件的相关概念，帮助大家区分这两种事件，学习react的同学不妨了解下
2021-05-05
使用React手写一个对话框或模态框的方法示例
这篇文章主要介绍了使用React手写一个对话框或模态框的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04