react 跨组件传值方式 context上下文 redux (白话总结)

最新推荐文章于 2025-02-25 20:49:56 发布
最新推荐文章于 2025-02-25 20:49:56 发布
阅读量566 收藏
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/YPX_YGWW/article/details/121703386
版权
本文详细介绍了在React中实现跨组件通信的两种常见方式：使用Context上下文和Redux状态管理库。对于Context，讲解了创建、生产和消费数据的步骤；而对于Redux，则阐述了其核心概念如store、reducer、action以及如何拆分和组织代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

跨组件传值方式

方式一:context上下文

使用步骤:
    1.创建文件夹context,里面创建index.js写一个组件

    2.创建上下文对象以及(对象的方式创建)他的生产者和消费者
            2-1.引进去上下文对象createContext
            2-2.创建上下文对象

  let context=createContext()

            2-3.创建生产者和消费者   

  let {Provider,Consumer}=context;

          2-4.this.props.children 表示所有的子元素
                组件里写{this.props.children}
          2-5暴露出去

export {Index,Consumer}

    3.我们需要传递数据  那么就把当前这个上下文对象的组件变成所有组件的老大
    在整体的index.js中设置  
            3-1.引用并且解构出上下文对象的组件

 import {Index} from "./context/index.js"

         3-2.让上下文对象变成所有组件的老大,在整体的index里面把App包裹起来

                <Index>
                    <App />
                </Index>,

 4.生产数据
            4-1.生产数据

                this.props.children 表示所有的子元素

                <Provider value={
  {text:"数据1",num:666}}>

                    {/* 4.this.props.children 表示所有的子元素 */}
                    {this.props.children}

                </Provider>

    总:以上全写context文件夹下的index.js文件中            

    5.消费数据(使用数据)
        说明:谁使用数据,就在谁中设置
        5-1.引用消费者


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    


                



	

		

			

				
					
深入浅出React+Redux（四：Redux - 组件的Context）

				
			

			

				

					JUSTIN的博客
				

				

					03-03
					
					3655
					
				

			

		

		

			
				
前言

对于工作遇到些不开心的事，我也只能说，运气不好吧，算了不提，React这东西是不难，搭个状态处理，真的是什么一下子维护很多文件夹。

不过，vue还真是出了名简单，上手难度就在vuex api哪里。其他真的是把ng整个组件传值，模板语言拿过来，换汤不换药。



（一）Redux 特点

Redux顾名思义（Reducer+Flux）



1. 唯一数据源

唯一数据源指的是应用的状态数...

			
		

	



                

            
              



	

		

			

				
					
React中Context与React-Redux的区别

				
			

			

				

					ZY9458的博客
				

				

					07-28
					
					1038
					
				

			

		

		

			
				
官方地址:使用 Context 深层传递参数 – Reactreact中有状态提升的概念，如果一个状态被兄弟组件都用到的话那么这个状态就可以被提升到共同的父组件然后通过prop传递下去。但是随着组件数的层级越来越多prop的传递也会越来越深这就导致了开发、调试成本的增加。这时候Context就可以解决这个问题。Context可以避免prop的层层传递同时当值发生变化时也可以触发React组件的更新Context基础用法使用createContext创建Context上下文。

			
		

	



              


  
              

                


	

		

			

				
					
Redux和React-Redux的实现（一）：Redux的实现和context

				
			

			

				

					Saber00001的博客
				

				

					12-26
					
					362
					
				

			

		

		

			
				
react使用redux做状态管理，实现多个组件之间的信息共享，解决了父子组件、兄弟组件之间的复杂通信问题。vue有vuex，总之是一种flux的思想。react提供了react-redux这个库，一看名字就知道是为了将react和redux关联起来，react-redux有connect高阶函数以及Provider组件、milddleware、thunk等，来实现一下。
篇幅过长，多分...

			
		

	





	

		

			

				
					
请谈谈 React 中的状态管理，如何使用 Context API 和 Redux 进行状态管理？

					
最新发布

				
			

			

				

					程序员学习园地。
				

				

					02-25
					
					978
					
				

			

		

		

			
				
最终选型需综合考虑项目规模、团队经验和长期维护成本。对于新项目，可以从Context API起步，随着复杂度增长逐步引入Redux。推荐使用Redux Toolkit（RTK）简化传统Redux的模板代码，结合React-Redux实现高效状态管理。创建上下文对象，使用Provider组件包裹需要共享状态的组件树，子组件通过。Hook或Consumer组件消费数据。

			
		

	



		

			
		



	

		

			

				
					
React: Context vs Redux

				
			

			

				

					学习笔记
				

				

					01-12
					
					1042
					
				

			

		

		

			
				
props 用于配置，context 用于状态管理。但是，context 有其局限性，对于高频变化的情况，context 没有进行优化，对于用户认证的之类的情况，用户有可能几分钟才登录/退出登录，使用 context 还是很理想的。如果state 频繁变化，而且传递 props 数据麻烦，又想使用 context 之类的方法，那么改用 Redux。


...

			
		

	





	

		

			

				
					
react传值（父子传值，context传值，redux传值）

				
			

			

				

					Realizee的博客
				

				

					10-24
					
					3749
					
				

			

		

		

			
				
总述：
    组件间通讯有什么方法：
      1）使用props传值
      2） 使用context传值
      3） 使用redux传值
 非跨组件传参，以上传参方式都可用，比较常用也好用的是
跨组件传参，使用props一层层往下传，使用context，或者用redux 。

			
		

	





	

		

			

				
					
React跨组件传值

				
			

			

				

					小菜鸟的博客
				

				

					08-18
					
					1815
					
				

			

		

		

			
				
React跨组件传值

React跨组件传值运用的是提供者与消费的概念来创建的 ,借助react中的对象context来实现，这个对象里面默认有个属性Provider,ConsumerProvider 是提供数据，一般写在入口组件，
Consumer 是消费数据

接下来是用法
首先创建一个文件作为存储数据的仓库glabol.js
import React from 'react'
//导出对象 因为React.createContext()里面有两个属性Provider，Consumer所以需要导出
ex

			
		

	





	

		

			

				
					
react组件的跨组件传值

				
			

			

				

					yezi153的博客
				

				

					11-11
					
					412
					
				

			

		

		

			
				
封装这个模块文件 文件名context.js

1.从react中按需导入 createContext方法

import { createContext } from 'react'

// 2.调用createContext()解构出对象

const { Provider, Consumer } = createContext()

// 3.按需导出对象

export { Provider, Consumer }

在根组件里面引入Provider

import { Provider } fro

			
		

	





	

		

			

				
					
React   Context

				
			

			

				

					chunlijian1152的博客
				

				

					06-13
					
					213
					
				

			

		

		

			
				
何时使用context
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默...

			
		

	





	

		

			

				
					
react跨页面跨组件传值

				
			

			

				

					qq_40678503的博客
				

				

					11-04
					
					2969
					
				

			

		

		

			
				
做需求的时候遇到这样一个情况，要跨页面跨组件进行传值，两个页面并不是父子关系
数据由a页面传到b页面
在src目录下创建store目录，并在里面创建test.js
import { createStore } from 'redux'

const defaultState = {
  list: []
}
const store = createStore((state = defaultSta...

			
		

	





	

		

			

				
					
基于react组件之间的参数传递(详解)

				
			

			

				

					08-29
				

			

		

		

			
				
下面小编就为大家带来一篇基于react组件之间的参数传递(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
react 跨组件传值 context与redux的使用

				
			

			

				

					YPX_YGWW的博客
				

				

					12-03
					
					1132
					
				

			

		

		

			
				
react中组件传递参数是通过props一层一层的进行传递的 数据也是单向传递的 如果出现了跨层级的关系 要是按照传统的方式传参 太麻烦了

方式1 context上下文对象

就是react中为了解决跨层级传值出现的一个技术 降低了数据传递的复杂度 传递起来更加的高效

上下文对象 有两个内容


Provider 生产者 ----- 》 创建要传递的数据

Consumer 消费者 ------ 》 使用传递的数据


使用:

1.使用上下文对象 我们可以创建一个文件夹用来容纳他 并且创建一个文件写一

			
		

	





	

		

			

				
					
React组件之间的传值

				
			

			

				

					qq_67973709的博客
				

				

					09-18
					
					614
					
				

			

		

		

			
				
【代码】【无标题】

			
		

	





	

		

			

				
					
react组件之间传值

				
			

			

				

					weixin_45348207的博客
				

				

					03-17
					
					534
					
				

			

		

		

			
				
组件之间传值 --- 父组件点击显示详情点击显示编辑--在详情中点击显示编辑

			
		

	





	

		

			

				
					
React组件传值之-跨组件传值

				
			

			

				

					瑋来可期的博客
				

				

					07-29
					
					515
					
				

			

		

		

			
				
react 组件间传递数据是通过 props 向下，是单向传递的，从父级一层一层地通过 props 地向下传递到子子孙孙，有的时候我们组件一层一层的嵌套多层，这样这种方式一层一层传递麻烦，如果想跃层传递，这就会用到 context。其中就有一个useContext可以简化我们在函数组件中使用上下文对象的复杂度。接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。context很好的解决了跨组件传值的复杂度。可以快速的进行跨组件数据的传递。

			
		

	





	

		

			

				
					
React组件传值(跨级组件)

				
			

			

				

					qq_52845451的博客
				

				

					08-29
					
					689
					
				

			

		

		

			
				
react跨级组件传值(context)

			
		

	





	

		

			

				
					
React: 组件之间传值

				
			

			

				

					weixin_44538672的博客
				

				

					06-11
					
					961
					
				

			

		

		

			
				
注意props是只读对象，子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改。可以传递任何值， 包括基本数据类型， 引用类型， 方法，JSX内容，嵌套在子组件中的内容（子组件会自动在名为。以下列场景为例，在App组件内部获取子组件ref, 然后调用其内部focus方法使子组件内部input聚焦。以下列场景为例，在App组件内部获取子组件ref, 然后让其内部的input元素聚焦。总结：代码很简单，主要是知识点的梳理总结。核心思想是在子组件中调用父组件中的函数并传递参数。

			
		

	





	

		

			

				
					
【React项目中的状态管理：Redux与Context的对比与选择】

				
			

			

				

					欢迎来到我的技术博客！我是一名前端开发工程师，专注于前端技术与人工智能的融合。在这里，我将分享前端开发的实战经验、新技术应用，以及如何利用DeepSeek等工具提升工作效率。同时，我也会探讨人工智能在前端开发中的应用，帮助你紧跟行业趋势。无论你是初学者还是
				

				

					02-06
					
					765
					
				

			

		

		

			
				
在React项目开发中，状态管理是一个关键环节。随着项目复杂度的增加，合理选择状态管理方案至关重要。本文将对比Redux和Context两种常用的状态管理方案，帮助你在项目中做出更合适的选择。Redux是一个开源的状态管理库，广泛应用于React项目中。它通过单一的状态树来管理应用的全局状态，确保状态的可预测性和可维护性。Redux的核心概念包括Action、Reducer和Store。通过这些概念，开发者可以清晰地管理状态的变更。// 示例：Redux的基本使用// Reducer。

			
		

	





	

		

			

				
					
 React中跨组件传值方式

				
			

			

				

					06-07
				

			

		

		

			
				
React 中跨组件传值有多种方式，以下是几种常见的方式：

1. 父组件向子组件传递数据：通过 props 将数据传递给子组件，子组件通过 this.props 访问传递的数据。示例代码：

```javascript
// 父组件
class Parent extends React.Component {
  render() {
    const data = 'hello';
    return <Child data={data} />;
  }
}

// 子组件
class Child extends React.Component {
  render() {
    const { data } = this.props;
    return <div>{data}</div>;
  }
}
```

2. 子组件向父组件传递数据：通过父组件传递函数给子组件，在子组件中调用该函数来传递数据。示例代码：

```javascript
// 父组件
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    };
    this.handleDataChange = this.handleDataChange.bind(this);
  }

  handleDataChange(data) {
    this.setState({ data });
  }

  render() {
    return <Child onDataChange={this.handleDataChange} />;
  }
}

// 子组件
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'hello'
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    const { onDataChange } = this.props;
    const { data } = this.state;
    onDataChange(data);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleChange}>传递数据</button>
      </div>
    );
  }
}
```

3. 使用 Context：Context 提供了一种在组件之间共享数据的方法，避免了通过 props 层层传递的复杂性。示例代码：

```javascript
// 创建 Context
const MyContext = React.createContext();

// 父组件
class Parent extends React.Component {
  render() {
    const data = 'hello';
    return (
      <MyContext.Provider value={data}>
        <Child />
      </MyContext.Provider>
    );
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {data => <div>{data}</div>}
      </MyContext.Consumer>
    );
  }
}
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值