react入门笔记之数据共享

已于 2022-04-27 15:15:47 修改
阅读量302 收藏
点赞数
分类专栏： 前端 react js 文章标签： reactjs
于 2021-06-30 10:36:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S3328047358/article/details/118355972
版权
前端 同时被 3 个专栏收录
54 篇文章 0 订阅
订阅专栏
js
49 篇文章 0 订阅
订阅专栏
react
8 篇文章 0 订阅
订阅专栏

数据共享

父子组件

父组件
// 渲染子组件 传递 数据 id ; 方法 getId
<MenuList  id={'111'} getId={(id)=> {this.getId(id)}}></MenuList>
getId(id) {
    console.log('子组件传过来的id', id);// '666'
}
  子组件
  componentDidMount(){
    // 输出父组件参数id
    console.log('this.props.id', this.props.id); // '111'
    // 调用父组件方法 将 '666' 传递给父组件
    this.props.getId('666')
  }

兄弟组件

利用发布-订阅插件

npm i pubsub-js -S
组件1:
import PubSub from 'pubsub-js';
  // 订阅消息
  PubSub.subscribe('to-search', (name,data) => {
        console.log(`订阅到的消息${name}`, data); // name: to-search data:' 触发消息'
 });
 组件2: 
 // 发布消息
  PubSub.publish('to-search', '触发消息');

多个无关系组件

redux 配合react的使用

目录结构
在这里插入图片描述
index.js文件

	import React from 'react'
	import ReactDOM from 'react-dom'
	import App from './App'
	import store from './redux/store'
	ReactDOM.render(<App/>,document.getElementById('root'))
	store.subscribe(()=>{
		ReactDOM.render(<App/>,document.getElementById('root'))
	})

App.jsx文件

import React, { Component } from 'react'
import Count from './components/Count'
export default class App extends Component {
	render() {
		return (
			<div>
				<Count/>
			</div>
		)
	}
}

/redux/store.js

/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))

/redux/count_reducer.js

/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'
const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	// console.log(preState);
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState
	}
}

/redux/count_action.js

/* 
	该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'

//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})
//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createIncrementAction(data))
		},time)
	}
}

/redux/constant.js

/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

/components/count

import React, { Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/count_action'

export default class Count extends Component {

	state = {carName:'奔驰c63'}

	/* componentDidMount(){
		//检测redux中状态的变化，只要变化，就调用render
		store.subscribe(()=>{
			this.setState({})
		})
	} */

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		store.dispatch(createIncrementAction(value*1))
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		store.dispatch(createDecrementAction(value*1))
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		const count = store.getState()
		if(count % 2 !== 0){
			store.dispatch(createIncrementAction(value*1))
		}
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		// setTimeout(()=>{
			store.dispatch(createIncrementAsyncAction(value*1,500))
		// },500)
	}

	render() {
		return (
			<div>
				<h1>当前求和为：{store.getState()}</h1>
				<select ref={c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}
redux , react-redux配合react的使用
基本使用

在上面redux的使用的基础上修改 App.jsx及count组件
App.jsx

import React, { Component } from 'react'
import Count from './containers/Count'
import store from './redux/store'
export default class App extends Component {
   render() {
   	return (
   		<div>
   			{/* 给容器组件传递store */}
   			<Count store={store} />
   		</div>
   	)
   }
}

count组件

//引入Count的UI组件
import CountUI from '../../components/Count'
//引入action
import {
   createIncrementAction,
   createDecrementAction,
   createIncrementAsyncAction
} from '../../redux/count_action'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
/* 
   1.mapStateToProps函数返回的是一个对象；
   2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
   3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){
   return {count:state}
}
/* 
   1.mapDispatchToProps函数返回的是一个对象；
   2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
   3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){
   return {
   	jia:number => dispatch(createIncrementAction(number)),
   	jian:number => dispatch(createDecrementAction(number)),
   	jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
   }
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

深入使用

目录结构

在这里插入图片描述

index.js文件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
// 全局唯一store
import store from './redux/store'
// Provider 将store提供给所有组件访问
import {Provider} from 'react-redux'

ReactDOM.render(
	<Provider store={store}>
		<App/>
	</Provider>,
	document.getElementById('root')
)

App.jsx
组件渲染

import React, { Component } from 'react'
import Count from './containers/Count'
import Person from './containers/Person'

export default class App extends Component {
	render() {
		return (
			<div>
				<Count/>
				<hr/>
				<Person/>
			</div>
		)
	}
}

/redux/store.js

/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入汇总之后的reducer
import reducer from './reducers'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'

//暴露store 
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))

/redux/constant.js

/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'

/redux/reducers/index.js

/* 
	该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers，用于汇总多个reducer
import {combineReducers} from 'redux'
//引入为Count组件服务的reducer
import count from './count'
//引入为Person组件服务的reducer
import persons from './person'

//汇总所有的reducer变为一个总的reducer
export default  combineReducers({
	he:count,
	rens:persons
})

/redux/reducers/count.js

/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from '../constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	// console.log('countReducer@#@#@#');
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState
	}
}

/redux/reducers/person.js

import {ADD_PERSON} from '../constant'

//初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]

export default function personReducer(preState=initState,action){
	// console.log('personReducer@#@#@#');
	const {type,data} = action
	switch (type) {
		case ADD_PERSON: //若是添加一个人
			return [data,...preState]
		default:
			return preState
	}
}

/redux/actions/count.js

/* 
	该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from '../constant'

//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createIncrementAction(data))
		},time)
	}
}

/redux/actions/person.js

import {ADD_PERSON} from '../constant'

//创建增加一个人的action动作对象
export const createAddPersonAction = personObj => ({type:ADD_PERSON,data:personObj})

/containers/count/index.jsx

import React, { Component } from 'react'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

//定义UI组件
class Count extends Component {

	state = {carName:'奔驰c63'}

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.jia(value*1)
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.jian(value*1)
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		if(this.props.count % 2 !== 0){
			this.props.jia(value*1)
		}
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.jiaAsync(value*1,500)
	}

	render() {
		//console.log('UI组件接收到的props是',this.props);
		return (
			<div>
				<h2>我是Count组件,下方组件总人数为:{this.props.renshu}</h2>
				<h4>当前求和为：{this.props.count}</h4>
				<select ref={c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
		count: state.he,
		renshu:state.rens.length
	}),
	{
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)

/containers/person/index.jsx

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createAddPersonAction} from '../../redux/actions/person'

class Person extends Component {

	addPerson = ()=>{
		const name = this.nameNode.value
		const age = this.ageNode.value
		const personObj = {id:nanoid(),name,age}
		this.props.jiaYiRen(personObj)
		this.nameNode.value = ''
		this.ageNode.value = ''
	}

	render() {
		return (
			<div>
				<h2>我是Person组件,上方组件求和为{this.props.he}</h2>
				<input ref={c=>this.nameNode = c} type="text" placeholder="输入名字"/>
				<input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>
				<button onClick={this.addPerson}>添加</button>
				<ul>
					{
						this.props.yiduiren.map((p)=>{
							return <li key={p.id}>{p.name}--{p.age}</li>
						})
					}
				</ul>
			</div>
		)
	}
}
export default connect(
	state => ({yiduiren:state.rens,he:state.he}),//映射状态
	{jiaYiRen:createAddPersonAction}//映射操作状态的方法
)(Person)
风吹@头皮凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用react-redux实现react组件之间数据共享的方法
08-27
主要介绍了用react-redux实现react组件之间数据共享的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React学习笔记之高阶组件应用
01-19
是什么 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。 为什么用 封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。 如何用 //hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件 //当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。 //高阶组件可以叠加使用，可以对一个组件使用多个高阶组件 @hoc class Hello extends React.Component { // } 如何实现 属性代理 下面的例子是最简单的一个实现 function hoc(Impo
React学习笔记之条件渲染（一）
01-19
前言 在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting>; } return <GuestGreeting>; } ReactDOM.render( // Try changing to isLoggedIn={t
react教学笔记，从入门到精通
06-06
react教学笔记，从入门到精通
React(11)-全局共享通信Context
m0_65912225的博客
09-03 719
Context是什么? Context原理 发布订阅Provider&&Consumer组件的使用 1.创建方式(避免组件之间props传递) 2.Provider组件作用(important!!) 使用示例 版本1：正常props传值 版本2：context传值--双层嵌套 Provider组件： Consumer组件： 版本3：context传值--三层嵌套 注意： 版本4：context传值--抽离按钮行为 注意： 版本5：context传值--多个Provider场景(注
React——组合components
m0_51474171的博客
07-06 279
1.创建Boxes组件 Boxes组件中包含一系列Box组件。 之前已经写好了一个box.js文件，里面有一个Box类，这个类就可以引入到Boxes.js文件作为一个标签使用。 2.从上往下传递数据 通过属性可以从上到下传递数据。 通过标签传数据，在标签内定义之后，在定义标签的类里通过this.props可以得到定义的数据，定义时对应的值要加大括号 例如： 输出： 3.传递子节点 通过属性传递子节点 如果是标签嵌套，那么标签内部的孩子也会传递过去 例如： 输出： Box在Boxes里面作为
解决react表格嵌套主表和子表都可以新增、编辑、保存、删除
ask_baidu的博客
01-05 1063
作者查阅资料，花了几天时间，解决了多个问题。现分享出来，供大家参考。支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。（包含组件，不包含store）使用后端数据可以把测试数据删除，修改有store的地方，后端返回json，支持分页等。index.js 里有测试数据。
React--》React组件间数据的通信与共享
ztK63LrD的博客
01-19 1879
是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。： 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，如果传入的数据格式不对，可能会导致组件内部报错。Context提供了两个组件：Provider组件(用来提供数据)，Consumer组件(用来消费数据)。利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
使用 React 上下文在组件之间共享数据
最新发布
梵心的博客
07-07 303
在这个示例中，我们定义了一个上下文对象和提供器组件，以及一个自定义钩子函数来访问上下文对象的值。通过使用上下文，我们可以避免将数据通过多层组件进行传递，而是直接在需要的组件中访问共享的数据。我们将创建一个示例，展示如何使用上下文来共享一个数据对象，并在需要的组件中进行更新。我们在组件中展示了共享数据的值，并提供了一个按钮来触发更新数据的操作。接下来，我们需要创建一个提供器组件，用于将数据提供给需要的组件，并提供更新数据的方法。现在，我们已经定义了上下文对象和提供器组件，我们可以在需要的组件中使用它们了。
基于React Hooks的简单全局状态共享实现方案
衣乌安、随笔
03-06 1379
常规B端项目中往往需要一些全局通用的状态来实现跨组件层级甚至整个系统全局的共享，比如：当前用户的信息、某些业务状态等。
React学习之受控组件与数据共享实例分析
10-15
主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下
react入门实战项目-类印象笔记应用源码
08-11
本篇，将记录如何使用React实现一个简版的印象笔记App的入门实例，本实例也比较好实现，但内容相对于上个Demo更加丰富，用到了许多新的知识点，都是非常实用，必须掌握的一些内容,本菜鸟自己实践了一遍，收益非常多...
React 入门学习（十六）-- 数据共享
小丞同学
10-09 448
React 入门学习（十六）-- 数据共享 在写完了基本的 Redux 案例之后，我们可以尝试一些更实战性的操作，比如我们可以试试多组件间的状态传递，相互之间的交互 如上动图所示，我们想要实现上面的案例，采用纯 React 来实现是比较困难的，我们需要很多层的数据交换才能实现，但
react react-redux数据共享学习记录
qq_45030898的博客
02-28 324
react react-redux数据共享学习记录
用react-redux实现react组件之间数据共享
weixin_33840661的博客
05-13 454
上篇文章写到了redux实现组件数据共享的方法，但是在react中，redux作者提供了一个更优雅简便的模块实现react组件之间数据共享。那就是利用react-redux 利用react-redux实现react组件数据之间数据共享 1.安装react-redux$ npm i --save react-redux2.从react-r...
React数据共享的三种方法
ygunoil的博客
12-27 66
在典型的React应用中，数据是通过props属性自上而下(由父及子)进行传递的。 但是，在实际开发中，我们发现有某些属性是许多组件都需要的，那么通过组件树逐层传递props就会特别繁琐，且不容易维护。 所以总结以下三种不用逐层传递props，也可以获得共享数据的方法： 1、Context 版本： 从React 16.3.0开始，加入了Context API。 Context provides...
玩转 React（七）- 组件之间的数据共享
weixin_34268169的博客
12-10 255
上一篇文章 玩转 React（六）- 处理事件 介绍了在 React 中如何处理用户事件，以及 React 事件机制与原生 DOM 事件的差异和注意的问题，同时也介绍了事件处理函数中 this 的指向问题以及处理的几种方式及其优缺点。 大家在阅读的过程中有任何为题可以给我留言，同时欢迎大家加入玩转 React 微信群，我的微信号是 leo...
使用react-redux实现数据共享
m0_63135041的博客
04-28 260
使用react-redux实现数据共享
微信小程序UI组件库合集
IT水很深，路还很长
01-17 6527
微信小程序实用UI组件库合集。 UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址WeUI组件库简介 | 微信开放文档 预览码： 第二款： ColorUI：地址https://github.com/weilanwl/ColorUI 预览码： 第三款： vantUI（又名：ZanUI）：地址Vant Weapp - 轻量、可靠的小程序 UI 组件库 预览码： 第四款： MinUI： 地址https...
react跨页面共享数据
05-25
React中可以使用context API来实现跨页面共享数据。Context提供了一种在组件之间共享值的方式，而不必将props一层层传递下去。 以下是一个简单的例子，演示如何在页面之间共享数据： 1. 创建一个Context ```jsx ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值