React---组件通信的方式

1.父子组件通信方式

• （1）传递数据（父传子）与传递方法（子传父）

基本的Props传递数据与Props传递方法

父传子

1）、定义组件时，声明props形参：
class Person extends React.Component {
  constructor(props) {
     super(props); 
}
render() {
    return (
        
       
          姓名：{this.props.name}

      
    );
  }
}

2）、使用组件时，传入参数：

在子传父中，​ 父组件利用props传递方法给子组件，子组件回调这个方法的同时，将数据传递进去，使得父组件的相关方法得到回调，这个时候就可以把数据从子组件传递给父组件了

//1、父组件
class App extends React.Component {
    constructor(){
        super();
        this.state={
            titie:"Home"
        }
    }
    changeData(str){
        console.log("子传给了父亲：",str);
    }
    render = () => (
        

           
           
        
    )
};

//2、子组件
class Home extends React.Component {
    constructor(name){
        super();
        this.name=name;
        this.state={
            msg:"hello "
        }
    }
    render = () => (
        

             
我是{this.props.title}
             
{this.state.msg+this.props.title}
             this.props.myFun('HELLO dad')} />
        
    )
}

• （2）ref标记（父组件拿到子组件的引用，从而调用子组件的方法）

ref的创建用xxx = React.createRef

在父组件中清除子组件的input输入框的value--->this.refs.form.reset（）

ps：不过React官方文档建议不要过度依赖ref

2.非父子组件通信方式

• （1）状态提升（中间人模式）

React中的状态提升概括来说，就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过props分发给子组件。

• （2）发布订阅模式实现

订阅: token=pubsub.subscribe(‘消息名’,回调函数(‘消息名’,数据))
发布： pubsub.publish(‘消息名’,数据)
清除指定订阅：pubsub.unsubscribe(token|‘消息名’);
清除所有：pubsub.unsubscribeAll()

//下载pubsub依赖
npm i pubsub-js -S

//导入依赖
import pubsub from 'pubsub-js'

child1组件中订阅一个事件

pubsub.subscribe('event1',()=>{alert('child1中订阅的事件')}

child2组件中发布这一事件

alertHandler=()=>{pubsub.publish('event1')}

点击触发child1组件订阅的event事件

注意：child1组件和child2组件都要引入pubsub 才可以使用

• （3）context状态树传参

context状态树传参，即供应商消费者模式，跨组件通信方案
       1.创建context对象   const GlobalContext = React.createContext()
       2.给提供通信信息的组件加上供应商标签，直接将return后的最外层

套在context标签内部即可，在标签上使用value={{属性或方法}}进行传值
       3.给需要通信的组件加上消费者标签，需要将

放到回调函数内部，回调函数接受value值，在函数内调用value中的方法，修改value中的属性

import axios from 'axios';
import React, { PureComponent } from 'react'
 
const GlobalContext = React.createContext();//创建context对象
 
export default class App extends PureComponent {
    constructor(){
        super();
        this.state={
            filmdatas:[],
            info:""
        }
        axios({
            url:"test.json"
        }).then(res=>{
            this.setState({
                filmdatas:res.data.data.films
            })
        })
    }
    render() {
        return (
//供应商也就是父组件，用GlobalContext.Provider包裹，并在value里设置供应的数据和方法
            {
                    this.setState({
                        info:value
                    })}
                }}>
            

                
                
            
            
        )}
}
class LeftShow extends PureComponent {
    render() {
        return(
//消费者也就是子组件，用GlobalContext.Consumer包裹，并用（value）=>{}的形式给子组件传参
            {
                (value)=>{
                    return(
                        

                            {this.props.filmdatas.map(item=>
                                
{
                                    value.changeInfo(item.synopsis)
                                }}>
                                 
                                  
电影名：{item.name}
                                  
上映地：{item.nation}
                                  
时长：{item.runtime}分钟
                                
)
                            }           
                        
)}}
            )
}}
class RightShow extends PureComponent {
    render() {
        return (
            
                {
                    (value)=>

                                {value.info}
                            
                }
            
        )}}

• （4）redux和mobx

共同点：

• 两者都是为了解决状态不好管理，无法有效同步的问题而产生的工具。
• 都是用来统一管理应用状态的工具
• 某一个状态只有一个可靠的数据来源
• 操作更新的方式是统一的，并且是可控的
• 都支持store与react组件，如react-redux,mobx-react

Mobx和Redux的对比总结

1.redux将数据保存在单一的store中，而mobx将数据保存在分散的多个store中
2.redux使用plain object保存数据，需要手动处理变化后的操作，mobx使用observable保存数据，数据变化后自动处理响应的操作。
3.redux使用的是不可变状态，意味着状态只是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数；mobx中的状态是可变的，可以直接对其进行修改。
4.mobx相对来说比较简单，在其中有很多的抽象，mobx使用的更多的是面向对象的思维，redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助一系列的中间件来处理异步和副作用。
5.mobx中有更多的抽象和封装，所以调试起来会更加复杂，同时结果也更难以预测，而redux提供可以进行时间回溯的开发工具，同时其纯函数以及更少的抽象，让调试变得更加容易。

mobx:面向对象思维、多个store、observable自动响应变化操作、mobx状态可变，直接修改、更多的抽象和封装，调试复杂，结果难以预测。

redux:函数式编程思想、单一store，plan object保存数据，手动处理变化后的操作、使用不可变状态，意味着状态只读，使用纯函数修改，返回的是一个新的状态、提供时间回溯的开发工具。