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(
            
) } fn(){ const child=this.child.current child.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来实现

祖先子孙

  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 (
            
) } }

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.state
    return(
        
) }

兄弟Cmp2

import React, { Component ,createContext} from 'react'
export default class Cmp2 extends Component {
  // 只得到了默认数据 --> 没有包裹在Provider组件中
  static contextType = createContext
  render() {
    return (
      
) } setCount() { this.context.setCount() } }

兄弟Cmp1


    {
        value => 

{value.count}

}

总结

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

你可能感兴趣的