React中 类组件 和函数组件 如何去使用Context

最新推荐文章于 2024-02-23 15:45:37 发布
最新推荐文章于 2024-02-23 15:45:37 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： React 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25972233/article/details/125115163
版权

每日一学,继续加油。

React中类组件中 如何去使用孙子组件如何去使用爷爷组件的数据和方法,

如果不用Context对象去实现的花那么首先需要用this.props.属性名去实现

这里我先创建A组件 然后再次创建B组件 和C组件 ,然后C组件去使用 A组件的方法和数据

下面为B组件       

B组件接收到A组件传递过来的数据,然后B组件也是通天this.props去传递给C

接下来为C组件 接收B组件再次传递过来的参数

这种原生的通过this.props去逐级传递的方法很不好,

那我们来用Context()方法来跨级传递数据和方法

我们也是先来创建一个A组件  

在A组件外围 创建一个Context对象,通过value传值以后 B组件的子组件也能被调用到啦

 

然后B组件里面的所有子组件,要用的时候就收一下就行啦

static contextType = MyContext    创建的Context的对象名

虽然React.createContext方法好用,但是只限于多级嵌套,

单级嵌套的组件的话还是用this.props方法更加的快捷,方便

这个是类(Class)组件 去使用Context方法 下面来说一下函数组件如何去使用Context

使用函数组件的话,A组件里面的操作步骤还是不变的,

多用多看,多练习,才能更好更快的掌握 

react 使用context方式向后代组件进行传值（react组件传值——context）
weixin_44607531的博客
02-24 514
今天介绍一种在react种进行组件传值的方式——context 需求 有三个组件ABC，A为B父，B为C父。A中有一个数据username，要将它传给C组件。 完整代码与效果 首先看如下完整代码，我们再逐渐分析 import React, { Component } from 'react' const MyContext = React.createContext() const {Provider} = MyContext export default class A extends C
React 组件（函数、类组件）
YuLong的博客
09-07 806
文章目录组件与模块概念React 组件介绍 组件与模块概念 模块： 理解：向外提供特定功能的js程序, 一般就是一个js文件 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。 作用：复用js, 简化js的编写, 提高js运行效率 组件： 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 为什么要用组件： 一个界面的功能更复杂 作用：复用编码, 简化项目编码, 提高运行效率 模块化： 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用 组件化：
React的Context在类组件和函数式组件中的使用
m0_56986233的博客
04-18 2379
1.引入context，并解构出来 import React, { Component } from 'react' const NameContext = React.createContext() //Provider是给类组件 Consumer是类函数都可以 使用 const { Provider, Consumer } = NameContext 2.定义一个State state = { username: 'tom', age: 18 } 3.将你需要传递给子孙组件的值用Provider包
React----函数组件通信（context）
王延朕的博客
04-01 634
定义context listContext.js import {createContext} from "react"; export default listContext=createContext(null) 组件1 import React from 'react'; import Demo2 from "../demo2"; import listContext from "../../context/listContext"; export default function Demo(pr
React的类组件和函数组件context使用以及Hook中useContext使用
祥哥的说
02-13 4766
使用流程： 生产 消费 import React from 'react' // 创建 Context 填入默认值（任何一个 js 变量） const ThemeContext = React.createContext('light') // 底层组件 - 函数是组件 function ThemeLink (props) { // const theme = this.context // 会报错。函数式组件没有实例，即没有 this // 函数式组件可以使用 Consumer
[React 进阶系列] Functional Component 与 Class Component 中使用 Context
GoldenaArcher的博客
01-10 317
刚开始老板没说需要在 Layout 中渲染数据，所以所有的调用都是在 component level 进行实现。但是一旦说 Layout 也需要更新，那么这个就无法实现了——毕竟父组件的状态没有更新。后面合计了一下究竟是做 props drilling 还是用 context 后，决定用 context 实现——路由都封装了，再改真的好麻烦。
React中嵌套组件与被嵌套组件的通信过程
10-18
Hooks，如useState和useEffect，可以用来在函数组件中处理状态和生命周期事件，这样也可以实现组件之间的通信。对于本例，如果TabItem组件的激活状态是由多个TabItem共享的，那么我们可以使用useState在函数组件中...
详解在React中跨组件分发状态的三种方法
10-18
在React中实现跨组件的状态管理是一项基本且重要的技能，因为这涉及到React组件间的数据流动。本文将探讨在React中跨组件分发状态的三种方法，分别为受控组件、React Context API以及Redux。通过这些方法，我们可以...
详解React中的组件通信问题
08-29
总结来说，React组件通信的核心在于理解和掌握`props`的传递、回调函数的使用以及状态管理。随着应用规模的增长，开发者应根据实际需求选择合适的方法，以确保代码的可维护性和性能。通过不断学习和实践，开发者可以...
ReactNative中组件变量方法的导入导出共1页.pd
11-22
React组件有多个生命周期方法，如`constructor()`, `componentDidMount()`, `shouldComponentUpdate()`, `render()`, `componentDidUpdate()`, `componentWillUnmount()`等，它们在组件的不同阶段被调用，用于处理...
context 在不同类型组件的使用理解
qq_42309685的博客
12-16 659
对 react 中 context 的理解 使用 context 的大致目的：共享数据，避免数据的层层传递 类组件中的 context 步骤一：创建一个 context 对象，当加载到订阅这个 context 对象的组件的时候，会自动匹配下文 provider 中的 value 值。 const AuthContext = React.createContext(undefined); 步骤二：创建 provider，传递给消费组件，并订阅 conetext 的变化，即 value 值的变化，可以
React中使用Context的3种方式
qq_39650208的博客
11-22 2053
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。Context提供了一个局部的全局作用域，使用Context则无需再手动的逐层传递props。
react--Context
郑怪兽
09-08 177
Context Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 props单向数据流动： 如果觉得Props传递数据很繁琐，可以采用context,进行跨组件传递数据 moneyContext: import {createContext} from 'react'; let moneyContext = createContext() let { Provider, Consumer } = moneyContext export d
React--Context的使用
weixin_45928836的博客
10-20 435
一、为什么要用context Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 当我们子组件很多，并且都在同一个组件树上时，我们需要把props传递非常多次，所有我们可以用context把一些每个组件的公共数据通过Provider传递。 Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。 二、如何使用Context？ 详情参考官网 (1) Reract官方给出的API ： React.createContext：创建一个上下文的容器(组
react里的context
Mr_RedStar的博客
05-01 1241
文章目录一、什么是上下文（context）？二、旧版本的上下文上下文的创建上下文的使用二、新版本的上下文总结 一、什么是上下文（context）？ 上下文，当一个组件创建了上下文后，其后代组件都可以使用该上下文中的数据。 在之前的学习中，我们知道react的数据要么来源于自身的状态，要么来源于父级传过来的props。 有了上下文之后，组件多了一个数据来源，那就是context上下文。 react16版本前的的上下文和16版本之后的上下文是不一样的。 二、旧版本的上下文 旧版本的react认为只有类才有状态
React 组件之间的通信（context上下文对象）
m0_48757492的博客
01-29 160
context上下文对象
详解 React 中的 Context
最新发布
nana_lala的博客
02-23 3645
context 是 React 提供的一个跨层级通信的方式，它允许父组件向其下面整个树提供数据，让我们可以不用显式地通过组件树逐层传递 props。
react类组件的第四个属性context
qq_43958325的博客
02-25 6509
类组件中的第四个属性context 步骤如下： import { createContext } from 'react' let { Provider,Consumer } =createContext()     Provider是生产者，Consumer为消费者 <Provider value="xx"></Provide...
React——类组件==＞函数组件——memo（无用的渲染、shouldComponentUpdate / Pure Component、React.memo）、context上下文
qq_52301431的博客
10-13 1288
实际上，除了实例的context属性(this.context)，React组件还有很多个地方可以直接访问父组件提供的Context类组件:所有能访问this的地方都可以==>this.context无状态的函数组件:)
React高级模式：类组件与函数钩子的解决方案
然而，随着React Hooks的引入，函数组件开始展现出其简洁和强大的一面，许多基于类的模式现在可以使用Hooks来实现。 3. 使用类的React模式 在使用类的React模式中，开发者需要熟练掌握以下几个关键点： - 组件生命...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值