父组件与子组件通信
-
父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变
-
父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法
父组中定义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(
<div>
<Child1 ref={this.child}/>
<button onClick={this.fn.bind(this)}></button>
</div>
)
}
fn(){
const child=this.child.current
child.setTitle()
}
}
|
子组件定义好数据源和修改数据源方法
import React,{Component} from 'react'
export default class Child1 extends Component{
state={
title:'标题'
}
render(){
return (
<div>
{this.state.title}
</div>
)
}
setTitle(){
this.setstate({title:'hh'})
}
}
|
子组件与父组件通信
父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。
跨组件通信
在react没有类似vue中的事件总线来解决这个问题，一是我们借助它们共同的父级组件通过代理的方式来实现，但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。
复杂的非父子组件通信在react中很难处理，多组件间的数据共享也不好处理，在实际的工作中我们会使用flux、redux、mobx来实现
祖先子孙
-
定义store类 导出createContext中的Provider,COnsumer
-
在祖先节点中发布消息： Provider value=任意数据
-
在子孙节点中订阅：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 (
<div>
<Provider value={this.state.name}>
<Son/>
</Provider>
</div>
)
}
}
|
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(
<div>
<Consumer>
{
value=>{
<div>{value.name}</div>
}
}
</Consumer>
</div>
)
}
}
|
兄弟节点通信
-
一个子物体挂在事件
-
另一个挂在属性
-
通过实践改变属性，来改变另一个组件接受的内容
祖先
state={
count:1,
setCount:()=>{
this.setState(state=>{
return{
count:++state.count
}
})
}
}
render(){
let {count,setCount} = this.state
return(
<div>
<Provider value={{count,setCount}}>
<Cmp1></Cmp1>
<Cmp2></Cmp2>
</Provider>
</div>
)
}
|
兄弟Cmp2
import React, { Component ，createContext} from 'react'
export default class Cmp2 extends Component {
// 只得到了默认数据 --> 没有包裹在Provider组件中
static contextType = createContext
render() {
return (
<div>
<button onClick={this.setCount.bind(this)}>自增数据</button>
</div>
)
}
setCount() {
this.context.setCount()
}
}
|
兄弟Cmp1
<Consumer>
{
value => <h3>{value.count}</h3>
}
</Consumer>
|
|
