React组件通信方式

1.父子组件通信方式

//父组件
import Home from "./home/home.js";
class element extends Component {
	constructor(props) {
		super(props);
		this.state = {
			msg: "我是父组件的数据",
		};
	}

	render() {
		return (
			<div>
				<Home msg={this.state.msg} />//子组件
			</div>
		);
	}
}
//子组件
class Home extends Component {
  constructor(props) {
    super(props);
    console.log(this.props);//接收父组件传来的数据
  }
  render() {
    return (
    <div>
      <h1 className="red">{this.props.msg}</h1>
    </div>
    );
  }
}

2.子组件传父组件(使用回调函数)

//父组件
import Home from "./home/home.js";
import React, { Component } from "react";
class element extends Component {
	constructor(props) {
		super(props);
		this.state = {
			msg: "我是父组件的数据",
		};
	}
	setMsg = (pyload) => {
		console.log("接收到的数据",pyload);
	
	};
	render() {
		return (
			<div>                               //这里传数据需要用到回调函数
				<Home fun={(pyload)=>{this.setMsg(pyload)}} />
				<h2>Good to see you here.</h2>
			</div>
		);
	}
}
//子组件
import React, { Component } from "react";
class Home extends Component {
  constructor(props) {
    super(props);
    console.log(this.props);
	
  }
  setMsg=()=>{
   this.props.fun("我是子组件数据")
  };
  render() {
    return ( 
    <div>
    	<button onClick={this.setMsg}>按钮</button>
    </div>
    );
  }
}

3.使用上下文createContext （祖代传与后代的方法）

注意！ React.createContext() 不要重复引入 不然会导致获取不了数据

后代想要修改值 不能直接修改，因为数据是单向流的，用回调函数方式通知祖代修改数据
需要在祖代传入一个修改数据的函数即可

//这是后代组件
import React, { Component } from "react";
import { Consumer } from "../context.js"; //那个后代需要祖代数据 就要引入Consumer 

class about extends Component {
	render() {
		return (
			<div>
				<Consumer>
					{(value) => {
                         return <div>我是后代组件:{value.msg}<button onClick={value.func.bind(this,2)} >修改祖代数据</button></div> //这里一定要调用bind方法
                                                        //不然会频繁触发且报错
					}}
				</Consumer>
			</div>
		);
	}
}

export default about;
//这是祖代组件
import Home from "./home/home.js"; //第一层后代
import React, { Component } from "react";
import {Provider} from "./context.js"
class element extends Component {
	constructor(props) {
		super(props);
		this.state = {
			msg: "我是父组件的数据",
		};
	}
 setMsg=(pyload)=>{//修改方法
   console.log(pyload);
   this.setState({
    msg:pyload
   });
	render() {
		return (
			<div>
				<Provider value={{ msg: this.state.msg,func:(pyload)=>{this.setMsg(pyload)}}}> //想要修改数据可以引入函数
					<Home />//格式与上面后代一致，只是引入组件方式不一样
				</Provider>
			</div>
		);
	}
}
export default element;

//context.js 
import React from 'react'

const ThemeContext = React.createContext()

export const Provider = ThemeContext.Provider
export const Consumer = ThemeContext.Consumer

4.兄弟组件传值

也可以使用createContext进行传值

让父组件 作为中间件，兄弟之间通过父组件进行传值   bro1=>father=>bro2 bro2=>father=>bro1

//父组件

import "./App.css";
import Home from "./home/home.js";
import Home2 from "./home/home2.js";
import React, { Component } from "react";
import { Provider } from "./context.js";
class element extends Component {
	constructor(props) {
		super(props);
		this.state = {	
				home1: "我是home1数据",
				home2: "我是home2数据",
		};
	}
	setMsg = (pyload) => {
		console.log(pyload);
		this.setState({
			msg: pyload,
		});
	};
	homefun1 = (pyload) => {
    console.log(`我是home1${pyload}`);
    this.setState({
			home2: pyload,
		});
	};
	homefun2 = (pyload) => {
		console.log(`我是home2${pyload}`);
		this.setState({
			home1: pyload,
		});
	};
	render() {
    let {home1,home2}=this.state
    let {homefun1,homefun2}=this

		return (
			<div>
				<Provider
					value={{home1,home2,homefun1,homefun2}}
				>
					<Home />
                  <Home2/>
				</Provider>
			</div>
		);
	}
}
export default element;
//子组件1
import  './home.css'
import React, { Component } from "react";
import About from "../about/about.js";
import { Consumer } from "../context.js";
class Home extends Component {
  constructor(props) {
    super(props);

  }
  render() {
    return ( 
    <div>
      <About></About>
      <Consumer>
					{(value) => {
           
            return <div>我是home1:{value.home1}<button onClick={value.homefun1.bind(this,"home1数据")} >修改home2数据</button></div>
					}}
				</Consumer>
    </div>
    );
  }
}


export default Home
//子组件2
import React, { Component } from 'react';
import { Consumer } from "../context.js";
class home2 extends Component {
  render() {
    return (
      <div>
      	<Consumer>
					{(value) => {
 
            return <div>我是home2:{value.home2}<button onClick={value.homefun2.bind(this,"home2数据")} >修改home1数据</button></div>
					}}
				</Consumer>
        
      </div>
    );
  }
}

export default home2;

5.events(跨组件通信)

需要下载

npm install events -S

addListener("与emit名称一致才会触发",(res)=>{"这里是回调函数,res是数据"})

emit("自定义事件名称","发送的数据")

//组件销毁的时候一定要销毁监听 不然容易导致内存溢出

removeAllListeners("需要销毁的名称")

//先封装一个eventbus.js 文件
import {EventEmitter} from 'events'
export default new EventEmitter;
//在需要的地方引入即可

//home1.js
import "./home.css";
import React, { Component } from "react";
import About from "../about/about.js";
import Bus from "../eventbus.js";
class Home extends Component {
	constructor(props) {
		super(props);
		this.state = {
			bus: "我是home1的数据",
		}; 
	
	}
  componentDidMount(){//在生命周期挂着时,开启监听
    Bus.addListener("changeSiblingsData", (msg) => {
      console.log(this);
      
			this.setState({
				bus: msg,
			});
			console.log(msg);
		});
  }
  componentWillUnmount() {//注意在销毁函数 销毁监听 
		console.log("我被销毁了");
		Bus.removeAllListeners("changeSiblingsData");
	}
	render() {
		return (
			<div>
				<About></About>
				我是home1 {this.state.bus}
			</div>
		);
	}
}

export default Home;

//在home2.js  

import React, { Component } from "react";
import Bus from "../eventbus.js";
class home2 extends Component {
	constructor(props) {
		super(props);
		this.state = {
			bus: "我是home2的数据",
		};
	}
	emit = () => {
		let msg = "我是home2数据";
        //发布订阅
		Bus.emit("changeSiblingsData", msg);
	};
	componentDidMount() {
    console.log(Bus);
//这里自己也可以监听自己的
		Bus.addListener("changeSiblingsData", (msg) => {
			console.log(this);

			this.setState({
				bus: msg,
			});

			console.log(msg);
		});
	}
	componentWillUnmount() {
		console.log("我被销毁了");
		Bus.removeAllListeners("changeSiblingsData");
	}

	render() {
		return (
			<div id="example">
				我是home2{this.state.bus}
				<button onClick={this.emit}>发送数据</button>
			</div>
		);
	}
}

export default home2;

6.redux(应用状态的管理)