React组件通信方式总结

父组件向子组件传递数据

无论是类组件还是函数式组件，父组件向子组件传递数据的方式都是使用 props 来实现的

函数式组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
function ParentComponent() {  const message = 'Hello from Parent!';  return <ChildComponent message={message} />;  
}  
export default ParentComponent;  // 子组件（通过函数参数接收）
import React from 'react';  
function ChildComponent({ message }) {  return <div>{message}</div>;  
}  
export default ChildComponent;

类组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
class ParentComponent extends React.Component {  render() {  const message = 'Hello from Parent!';  return (  <div>  <ChildComponent message={message} />  </div>  );  }  
}  
export default ParentComponent;// 子组件（通过 `this.props` 接收）
import React from 'react';  
class ChildComponent extends React.Component {  render() {  const { message } = this.props;  return (  <div>{message}</div>  );  }  
}  
export default ChildComponent;

子组件向父组件传递数据

无论是类组件还是函数式组件，子组件向父组件传递数据的方式都是通过 回调函数 来实现的

• 父组件自定义函数，用来接收数据，并将函数通过 props 传递给子组件
• 子组件调用父组件传递的函数并传递数据

函数式组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
function ParentComponent() {  const handleDataFromChild = (data) => {  console.log('Received data from child:', data);  // 在这里处理从子组件接收到的数据  }  return (  <div>  <ChildComponent onDataReceived={handleDataFromChild} />  </div>  ); 
}  
export default ParentComponent;  // 子组件
import React from 'react';  
function ChildComponent({ onDataReceived }) {  const handleClick = () => {  const data = 'Hello from Child!';  onDataReceived(data); // 调用父组件传递的回调函数并传递数据  }  return (  <button onClick={handleClick}>Send Data to Parent</button>  );  
}  
export default ChildComponent;

类组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
class ParentComponent extends React.Component {  handleDataFromChild = (data) => {  console.log('Received data from child:', data);  // 在这里处理从子组件接收到的数据  }  render() {  return (  <div>  <ChildComponent onDataReceived={this.handleDataFromChild} />  </div>  );  }  
}  
export default ParentComponent;// 子组件
import React from 'react';  
class ChildComponent extends React.Component {  handleClick = () => {  const data = 'Hello from Child!';  this.props.onDataReceived(data); // 调用父组件传递的回调函数并传递数据  }  render() {  return (  <button onClick={this.handleClick}>Send Data to Parent</button>  );  }  
}  
export default ChildComponent;

兄弟组件传递数据

使用状态提升：父组件维护一个状态（state），这个状态将被传递给两个兄弟组件。

兄弟A数据 => 父 => 兄弟B数据

1. 兄弟组件A：兄弟组件A通过向父组件传递数据
2. 父组件：接收兄弟组件A传递过来的数据，并通过 props 传递给 兄弟组件B
3. 兄弟组件B：接收父组件过来的数据，该数据即为兄弟组件A组件的数据

函数式组件：

// 父组件  
import React, { useState } from 'react';  function ParentComponent() {  const [data, setData] = useState(null);  const handleDataChange = (newData) => {  setData(newData);  };  return (  <div>  <SiblingA onDataChange={handleDataChange} />  <SiblingB data={data} />  </div>  );  
}  // 兄弟组件A  
function SiblingA({ onDataChange }) {  // 假设这里有一个方法触发数据改变  const triggerDataChange = () => {  const newData = 'Hello from Sibling A!';  onDataChange(newData);  };  return (  <button onClick={triggerDataChange}>Send Data to Sibling B</button>  );  
}  // 兄弟组件B  
function SiblingB({ data }) {  return <div>{data}</div>;  
}

类组件：

// 父组件  
class ParentComponent extends React.Component {  state = { data: null };  handleDataChange = (newData) => {  this.setState({ data: newData });  };  render() {  return (  <div>  <SiblingA onDataChange={this.handleDataChange} />  <SiblingB data={this.state.data} />  </div>  );  }  
}  // 兄弟组件A  
class SiblingA extends React.Component {  // 假设这里有一个方法触发数据改变  triggerDataChange = () => {  const newData = 'Hello from Sibling A!';  this.props.onDataChange(newData);  };  render() {  return (  <button onClick={this.triggerDataChange}>Send Data to Sibling B</button>  );  }  
}  // 兄弟组件B  
class SiblingB extends React.Component {  render() {  return <div>{this.props.data}</div>;  }  
}

祖先与后代组件之间的传值

使用 Context API

在使用 React 的 Context API 时，通常会创建一个 Context 对象（例如 MyContext），然后在组件树中的某个位置使用 MyContext.Provider 来包裹那些需要访问 Context 值的组件。

• 这个 MyContext.Provider 通常会放在需要共享数据的最近公共祖先组件中。
• 确保那些需要访问 Context 值的组件是 Context.Provider 的后代组件即可。

// SiblingA、SiblingB 的公共祖先组件
// 首先创建 Context  
const MyContext = React.createContext();  // 创建一个 ProviderComponent 组件，它将使用 MyContext.Provider 来提供数据  
function ProviderComponent() {  const [data, setData] = React.useState(null);  return (  <MyContext.Provider value={{ data, setData }}>  {/* 这里是子组件，包括 SiblingA 和 SiblingB，它们可以访问 MyContext 中的值 */}  <SiblingA />  <SiblingB />  </MyContext.Provider>  );  
}  // SiblingA 组件
function SiblingA() {  const { data } = React.useContext(MyContext);  // 使用 useContext 钩子来访问 MyContext 中的 data  return <div>SiblingA: {data}</div>;  
}  // SiblingB 组件
function SiblingB() {  const { setData } = React.useContext(MyContext);  // 使用 useContext 钩子来访问 MyContext 中的 setData  return (  <button onClick={() => setData('新的数据')}>Update Data in SiblingB</button>  );  
}  

1. <MyContext.Provider value={{ data, setData }}> 组件包裹住 <SiblingA />、<SiblingB /> 组件，确保 <MyContext.Provider> 是公共祖先组件
2. <SiblingA />、<SiblingB />即可通过 React.useContext(MyContext) 获取到 MyContext 中的 value 和 setData

复杂关系的组件之间的传值

使用发布-订阅模式

当使用 发布-订阅模式 时，一般会使用第三方库 PubSubJS。

安装：
npm install pubsub-js --save
yarn add pubsub-js

组件B传递数据给组件A：（即：组件A是订阅者，组件B是发布者，先订阅再发布）

在组件A中：

• 使用 PubSub.subscribe方法来订阅事件。
• 这个方法接受两个参数：事件名称和一个回调函数，该回调函数将在事件被发布时执行：

  import PubSub from 'pubsub-js;componentDidMount() {  // 订阅一个myEvent事件，当有发布myEvent事件时触发回调从而获取到发布的数据PubSub.subscribe('myEvent', (msg, data) => {  // 处理接收到的数据  console.log(msg, data);  // 'myEvent', { message: 'Hello from another sibling!' }});  
  }  componentWillUnmount() {  // 组件卸载时取消订阅，避免内存泄漏  PubSub.unsubscribe('myEvent', this.handleMyEvent);  
  }
  

在组件B中：

• 使用 PubSub.publish 方法来发布事件。

• 这个方法接受两个参数：事件名称和要传递的数据：

  import PubSub from 'pubsub-js;handleClick = () => {  // 发布一个myEvent事件，该事件和数据会被订阅myEvent事件的回调捕获PubSub.publish('myEvent', { message: 'Hello from another sibling!' }); 
  };  render() {  return (  <button onClick={this.handleClick}>Publish Event</button>  );  
  }
  

注意：

1. 当组件卸载时，记得取消订阅事件，以避免潜在的内存泄漏
2. 通常不建议将其用作复杂关系组件之间传值的主要方式。React自身提供了一套基于 props 和 state 的数据流模型，以及 Context API 和Redux 等库来处理更复杂的状态管理

.

使用 Redux

Redux 是一个用于管理 JavaScript 应用程序中状态（state）的库，它提供了一种可预测的方式来更新应用程序的状态，类似 Vue 中的 Vuex。

传送门：

• Redux (1)

• Redux (2)