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生命周期原理与用法,结合实例形式总结分析了react生命周期原理、用法及相关注意事项,需要的朋友可以参考下
2020-04-04
react表单受控的实现方案
数据的受控控制一直是react里的一个痛点,当我想要实现一个输入框的受控控制时,我需要定义一个onChange和value,手动去实现数据的绑定,本文小编给大家介绍了react表单受控的实现方案,需要的朋友可以参考下
2023-12-12
解决React报错`value` prop on `input` should&
这篇文章主要为大家介绍了React报错`value` prop on `input` should not be null解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React获取url后面参数的值示例代码
这篇文章主要介绍了React获取url后面参数的值示例代码,代码简单易懂，文末给大家补充介绍了react获取URL中参数方法，需要的朋友可以参考下
2022-12-12
详解在React里使用"Vuex"
本篇文章主要介绍了详解在React里使用"Vuex"，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
react hooks UI与业务逻辑分离必要性技术方案
这篇文章主要为大家介绍了react hooks UI与业务逻辑分离必要性技术方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React项目中fetch实现跨域接收传递session的解决方案
这篇文章主要介绍了React项目中fetch实现跨域接收传递session的解决方案,本次项目使用了react框架，同时使用fetch取代ajax作为获取接口数据的交互方法，下面就对这次问题的解决做个总结，需要的朋友可以参考下
2022-04-04
解决React报错Property 'X' does not
这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
详解React中的useMemo和useCallback的区别
React中的useMemo和useCallback是两个重要的Hooks。常常被用于优化组件的性能。虽然这两个Hooks看起来很相似，但它们彼此之间还是有很大的区别的，随着小编一起来学习吧
2023-04-04
react antd实现动态增减表单
antd是react流行的ui框架库，本文主要介绍了react antd实现动态增减表单，分享给大家，感兴趣的小伙伴们可以参考一下
2021-06-06