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来实现

祖先子孙

定义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>

巴特西