react之组件通信详解

父组件与子组件通信

• 父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变
• 父组件利用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来实现

祖先子孙

1. 定义store类 导出createcontext中的provider,consumer
2. 在祖先节点中发布消息： provider value=任意数据
3. 在子孙节点中订阅：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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容！