React 组件间通信介绍

2021-12-19 16:49:43

React 组件间通信方式简介

React 组件间通信主要分为以下四种情况：

父组件向子组件通信
子组件向父组件通信
跨级组件之间通信
非嵌套组件间通信

下面对这四种情况分别进行介绍：

父组件向子组件通信

父组件通过 props 和子组件进行通信，子组件得到 props 后进行相应的操作
父组件 App.js:

import React, { Component } from 'react';
import './App.css';
import Child1 from './Child1';
class App extends Component {
render() {
return (
<div className="App">
<Child1 content="父组件传递的内容" />
</div>
);
}
}
export default App;

子组件 Child1.jsx

import React, { Component } from 'react';
class Child1 extends Component {
render () {
return (
<div>
子组件一：{ this.props.content }
</div>
)
}
}
export default Child1;

子组件向父组件通信

和父组件向子组件通信类似，父组件通过传递 props 给子组件，只不过 props 的内容是一个函数，子组件通过调用父组件传递过来的回调函数，将子组件内容传递给父组件。
父组件 App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Child1 from './Child1';
import Child2 from './Child2';
class App extends Component {
constructor(){
super();
this.state = {
msg:'',
}
}
childMsg(msg){
this.setState({
msg: msg,
})
}
render() {
return (
<div className="App">
子组件二传过来的内容：{this.state.msg}
<Child2 childMsg={this.childMsg.bind(this)}/>
</div>
);
}
}
export default App;

子组件 Child2.jsx:

import React, { Component } from 'react';
class Child2 extends Component {
msgHandle(){
this.props.childMsg(this.refs.input.value);
}
render () {
return (
<div>
子组件二：
<input type="text" placeholder='请输入内容' ref='input' />
<button onClick={this.msgHandle.bind(this)}>点击向父组件传参</button>
</div>
)
}
}
export default Child2;

跨级组件通信

跨级组件是指父组件向子组件的子组件进行通信，或者向更深层次的子组件通信，主要有两种方式：

通过 props 层层传递
使用 context 对象

对于层级不深的组件（三层以内），可以使用 props 进行层层传递，如果说层级更深的话，
每一层组件都要去传递 props，并且这些 props 可能不是自身需要的，这就增加了复杂度，这种场景就可以使用 context 进行通信。context 是一个全局变量，相当于一个大容器，我们把要传递的信息放到这个容器里面，不管嵌套层级多深，子组件都可以获取到信息。使用 context 需要满足以下三个条件：
1、父组件需要声明自己支持 context，并提供 context 对象中属性的 PropTypes
2、子组件需要声明自己需要使用 context，并提供其需要使用的 context 属性的 PropTypes。
3、父组件需要提供一个 getChildContext 函数，用来返回一个初始的 context 对象

props 层层传递：
父组件App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Child1 from './Child1';
class App extends Component {
constructor(){
super();
}
render() {
return (
<div className="App">
<Child1 content="父组件传递给孙子组件的内容" />
</div>
);
}
}
export default App;

Child1.jsx:

import React, { Component } from 'react';
import Child1_1 from './Child1_1';
class Child1 extends Component {
render () {
return (
<div>
<Child1_1 content={this.props.content}/>
</div>
)
}
}
export default Child1;

Child1_1.jsx:

import React, { Component } from 'react';
class Child1_1 extends Component {
render () {
return (
<div>
子组件一的子组件：{ this.props.content }
</div>
)
}
}
export default Child1_1;

context 对象传递
父组件App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from "prop-types";
import Child1 from './Child1';
class App extends Component {
// 声明支持 context
static childContextTypes = {
msgs: PropTypes.string,
callBack: PropTypes.func,
}
// 父组件提供一个函数，返回初始的 context 对象
getChildContext(){
return {
msgs:'父组件传递的初始内容',
callBack:this.callBack
}
}
callBack(msgs){
console.log(msgs);
}
render() {
return (
<div className="App">
<Child1 />
</div>
);
}
}
export default App;

子组件 Child1.jsx:

import React, { Component } from 'react';
import Child12 from './Child1_2';
class Child1 extends Component {
render () {
return (
<div>
<Child12 />
</div>
)
}
}
export default Child1;

子组件的子组件 Child1_2:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Child1_2 extends Component {
// 子组件声明需要调动 context
static contextTypes = {
msgs:PropTypes.string,
callBack:PropTypes.func
}
callBack(){
this.context.callBack('孙子组件的信息');
}
render () {
return (
<div>
子组件一的子组件：{ this.context.msgs }
<button onClick={this.callBack.bind(this)}>点击给爷爷组件传递信息</button>
</div>
)
}
}
export default Child1_2;

非嵌套组件间通信

表示没有任何包含关系的组件，主要包括兄弟组件和不在同一个父级中的非兄弟组件。

使用共同父组件的 context 对象通信
使用自定义事件的方式

对于使用共同父组件 context 的方式会增加子组件和父组件之间的耦合度，对于层级较深的组件找到共同父组件也比较麻烦，但是这种方式可实施。

为了避免父子组件之间的耦合度，我们采用自定义事件的方式：
需要安装 events 包，使用该模块的自定义事件机制npm i events --save
在根目录下新建 events.js 文件：

import { EventEmitter } from 'events';
export default new EventEmitter();

父组件 App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Child1 from './Child1';
import Child2 from './Child2';
class App extends Component {
render() {
return (
<div className="App">
<Child1 />
<Child2 />
</div>
);
}
}
export default App;