React 中的 useContext使用方法

目录
  • 什么是上下文呢？
  • useContext使用的方法:
    • 1.要先创建createContex
    • 2.Provider 指定使用的范围
    • 3.最后使用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 使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React 数据共享useContext的实现

    因为疫情, 最近接手一个新项目.是React的.上次写React已经过去1年多了. 虽然捡起来也不是什么难事,不过技术这个东西,长时间不用就容易忘记. 为了保证这个项目根其他平行项目的技术栈统一. 采用的是 Nextjs .styled-components.useContext .react-query.ts 今天不做重点介绍项目,还是说说在项目中碰到的问题. 这个足足折腾了差不多2个小时,我一直在排查其问题. 最后这个问题也是比较的诡异. ReferenceError: Cannot acc

  • React函数组件useContext useReducer自定义hooks

    React函数组件useContext useReducer自定义hooks

    目录 一.hooks(useContext) 二.hooks(useReducer) 三.hooks(useContext搭配useReducer使用) 四.自定义hooks 一.hooks(useContext) 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值.当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定. 新建useContext.js

  • React 中的 useContext使用方法

    目录 什么是上下文呢? useContext使用的方法: 1.要先创建createContex 2.Provider 指定使用的范围 3.最后使用useContext useContext就是上下文 什么是上下文呢? 全局变量就是全局的上下文,全局都可以访问到它:上下文就是你运行一段代码,所要知道的所有变量 useContext使用的方法: 1.要先创建createContex 使用createContext创建并初始化 const C = createContext(null); 2.Prov

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • React中useState的使用方法及注意事项

    React中useState的使用方法及注意事项

    目录 一.基本使用 第一个问题:setCount修改值时它是同步还是异步? 第二个问题:连续调用 setCount会发生什么? 二.注意事项 1.复杂变量的修改 2.异步操作获取更新的值 总结 一.基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下: const [count, setCount] = useState(initialCount) 它返回一个状态和一个修改状态的方法,状态需要通过这个方法来进行修改: initialCount 是我们

  • 在react中使用mockjs的方法你知道吗

    在react中使用mockjs的方法你知道吗

    目录 介绍 安装&卸载&引入 基础语法&规范 7种生成规则 生成规则和属性值value的关系 占位符@ 模拟接口 总结 介绍 mock意为“模仿”或"模拟",简单来说,就是造数据,造你想要的几乎任何数据,包括api和通过api返回的数据. 在写完项目进行自测,或者写页面需要数据 但是又不想单独开个后端,这时候就可以用mockjs来实现返回随机数据. 官网:http://mockjs.com/ 官方文档:https://github.com/nuysoft/Moc

  • React中使用UMEditor的方法示例

    最近项目中需要使用富文本编辑器,参考了运营小姐姐日常使用平台上的编辑器,最后考虑采用百度的UMEditor.因为轻量,功能和配置简单,没有很多定制化的功能,所以没采用UEditor.不过我后续会出一篇文章将UEditor的二次开发. umeditor的引入 组件设计 首先看一下组件大致的内容: 1.组件props: 2.组件关键的成员属性: 3.简单的render: 4.UMEditor的实例化 UMEditor源码里需要改动的主要就是图片的请求了,配置中的imgUrl我传的是一个方法,这个方法

  • React中props使用教程

    React中props使用教程

    目录 1. children 属性 1.1 React.cloneElement方法 1.2 React.Children.map方法 2. 类型限制(prop-types) 3. 默认值(defaultProps) 1. children 属性 概述: children 属性,表示组件标签的子节点,当组件标签有子节点时,props 就会有该属性,与普通的 props 一样,其值可以是任意类型.单标签和双标签中没有数据就没有此属性. 语法: # 父组件 class App extends Rea

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

  • React中jquery引用的实现方法

    React中jquery引用的实现方法

    在React中引用Jquery比较好玩,获取元素的数据更多 1.引入方法举例: import $ from 'jquery'; import { Button } from 'antd'; class testJquery extends React.Component { constructor(props) { super(props); this.selectElement = this.selectElement.bind(this); } render() { return( <div

  • 在 React、Vue项目中使用SVG的方法

    在 React、Vue项目中使用SVG的方法

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示. 而实际上,这些简单的小图标完全没必要让美工来做,前端完全可以通过 svg使用代码把这些简单的图标画出来,并且,因为这些图标是用代码描述出来的,所以如果想要修改这些图标,例如改变图标的颜色.图标的形状.大小等,都只是改几行代码的事情,非常简单,根本无需美工返工重做. 本文不是阐述如何利

  • React中this丢失的四种解决方法

    发现问题 我们在给一个dom元素绑定方法的时候,例如: <input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} /> React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子 import Re

随机推荐