react之组件通信详解
目录
- 总结
- 父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变
- 父组件利用ref对子组件做标记,通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法
import React,{Component,createRef} from 'react'import Child1 from './Child1'export default class App extends Component {constructor(props){super(props)this.child=createRef()}render(){return()}fn(){const child=this.child.currentchild.setTitle()}}
子组件定义好数据源和修改数据源方法
import React,{Component} from 'react'export default class Child1 extends Component{state={title:'标题'}render(){return ({this.state.title})}setTitle(){this.setstate({title:'hh'})}}
子组件与父组件通信 父组件将自己的某个方法传递给子组件,在方法里可以做任意操作,比如可以更改状态,子组件通过
this.props
接收到父组件的方法后调用。跨组件通信 在react没有类似vue中的事件总线来解决这个问题,一是我们借助它们共同的父级组件通过代理的方式来实现,但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。
复杂的非父子组件通信在react中很难处理,多组件间的数据共享也不好处理,在实际的工作中我们会使用flux、redux、mobx来实现祖先子孙
- 定义store类 导出createContext中的Provider,COnsumer
- 在祖先节点中发布消息: Provider value=https://www.it610.com/article/任意数据
- 在子孙节点中订阅:Consumer 回调函数{value=>(组件)}
1.定义数据源store
store.js
import React , {createContext} from 'react'let {Provider,Consumer} = createContext()export { Provider,//发布Consumer//订阅}
2.祖先节点
import React ,{Component} from 'react'import {Provider,Consumer} from './store'import Son from './Son'export default class App extends Component{constructor(props){super(props)this.state={name:'mingcen'}}render(){return ()}}
3.后代节点
import React,{Component} from'react'import {Consumer} from './store'export default class Son1 extends Component{constructor(props){super(props)this.state={name:'uuu'}}render(){return({value=>{{value.name}}} )}}
兄弟节点通信
- 一个子物体挂在事件
- 另一个挂在属性
- 通过实践改变属性,来改变另一个组件接受的内容
state={count:1,setCount:()=>{this.setState(state=>{return{count:++state.count}})}}render(){let {count,setCount} = this.statereturn()}
兄弟Cmp2
import React, { Component ,createContext} from 'react'export default class Cmp2 extends Component {// 只得到了默认数据 --> 没有包裹在Provider组件中static contextType = createContextrender() {return ()}setCount() {this.context.setCount()}}
兄弟Cmp1
{value => {value.count}
}
总结 【react之组件通信详解】本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai)
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之(北大核心)
- 生活随笔|好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息