【React】详解组件通信：从基础到进阶的全面指南

在React开发中，组件之间的通信是一个重要且常见的需求。无论是父组件向子组件传递数据，还是子组件向父组件发送消息，理解和掌握这些通信方式都是编写高效和可维护代码的关键。本文将详细介绍React中组件通信的各种方法，包括基础的父传子、子传父，及进阶的跨层级组件通信。通过本文，你将全面了解如何在React中实现高效的组件通信。

一、父组件向子组件传递数据

1. 基本概念

父组件向子组件传递数据是React中最常见的通信方式。父组件通过在子组件标签上绑定属性，将数据作为 props 传递给子组件。

2. 示例代码

import React from 'react';function Son(props) {// props：对象里面包含了父组件传递过来的所有的数据// { name: '父组件中的数据', age: 18, ... }console.log(props);return <div>this is son, {props.name}, jsx: {props.child}</div>;
}function App() {const name = 'this is app name';return (<div><Sonname={name}age={18}isTrue={false}list={['vue', 'react']}obj={{ name: 'jack' }}cb={() => console.log(123)}child={<span>this is span</span>}/></div>);
}export default App;

3. 详解

定义子组件 Son

function Son(props) {// props：对象里面包含了父组件传递过来的所有的数据// { name: '父组件中的数据', age: 18, ... }console.log(props);return <div>this is son, {props.name}, jsx: {props.child}</div>;
}

解释：

• Son 是一个函数组件，它接收一个参数 props。
• props 是一个对象，包含了父组件传递给子组件的所有数据。
• 在函数体内，通过 console.log(props) 可以看到 props 的内容，其中包括多个属性。
• return 语句返回了一段 JSX，表示子组件的 UI 结构。
  • this is son 是静态文本。
  • {props.name} 是从 props 中提取的 name 属性，显示传递过来的名字。
  • {props.child} 是从 props 中提取的 child 属性，这里传递的是一个 JSX 元素 <span>。

定义父组件 App

function App() {const name = 'this is app name';return (<div><Sonname={name}age={18}isTrue={false}list={['vue', 'react']}obj={{ name: 'jack' }}cb={() => console.log(123)}child={<span>this is span</span>}/></div>);
}

解释：

• App 是一个函数组件，它定义了一个变量 name，其值为 'this is app name'。
• 在 return 语句中，返回了一段包含子组件 Son 的 JSX。
• 父组件通过在子组件标签上添加属性，将数据传递给子组件：
  • name={name} 传递字符串 'this is app name'。
  • age={18} 传递数字 18。
  • isTrue={false} 传递布尔值 false。
  • list={['vue', 'react']} 传递数组 ['vue', 'react']。
  • obj={{ name: 'jack' }} 传递对象 { name: 'jack' }。
  • cb={() => console.log(123)} 传递函数 () => console.log(123)。
  • child={<span>this is span</span>} 传递 JSX 元素 <span>this is span</span>。

导出父组件 App

export default App;

解释：

• 使用 export default App; 将 App 组件作为默认导出，以便在其他文件中导入并使用它。

数据流

在这个例子中，数据流是单向的，即从父组件 App 传递到子组件 Son。父组件通过 props 向子组件传递数据，子组件通过 props 对象接收这些数据并进行渲染。

props 的内容

当 Son 组件被渲染时，props 对象包含如下属性：

{"name": "this is app name","age": 18,"isTrue": false,"list": ["vue", "react"],"obj": { "name": "jack" },"cb": function() { console.log(123); },"child": <span>this is span</span>
}

这些属性可以在 Son 组件中通过 props 进行访问和使用。例如：

• props.name 将返回 'this is app name'。
• props.age 将返回 18。
• props.isTrue 将返回 false。
• props.list 将返回 ['vue', 'react']。
• props.obj 将返回 { name: 'jack' }。
• props.cb 将返回 () => console.log(123)。
• props.child 将返回 <span>this is span</span>。

通过这种方式，父组件和子组件之间实现了数据的传递和共享，使得组件间的通信变得简单和直观。

二、子组件向父组件传递数据

1. 基本概念

子组件向父组件传递数据通常通过回调函数实现。父组件将一个回调函数作为 props 传递给子组件，子组件在需要传递数据时调用这个回调函数，并将数据作为参数传递回父组件。

2. 示例代码

import React, { useState } from 'react';function Son(props) {const handleClick = () => {props.onDataChange('子组件传递的数据');};return <button onClick={handleClick}>传递数据给父组件</button>;
}function App() {const [data, setData] = useState('');const handleDataChange = (newData) => {setData(newData);};return (<div><Son onDataChange={handleDataChange} /><p>父组件接收到的数据: {data}</p></div>);
}export default App;

3. 详解

引入React库和useState钩子

import React, { useState } from 'react';

这行代码引入了React库和 useState 钩子，使我们能够使用React的功能来定义和管理组件状态。

定义子组件 Son

function Son(props) {const handleClick = () => {props.onDataChange('子组件传递的数据');};return <button onClick={handleClick}>传递数据给父组件</button>;
}

解释：

• Son 是一个函数组件，它接收一个参数 props。
• props 是一个对象，包含了父组件传递给子组件的所有数据和函数。
• 定义了一个 handleClick 函数，当按钮被点击时，这个函数将会被调用。
• 在 handleClick 函数中，通过调用 props.onDataChange('子组件传递的数据')，子组件将数据 '子组件传递的数据' 传递给父组件。
• return 语句返回了一段 JSX，表示子组件的 UI 结构：一个按钮，点击该按钮时会调用 handleClick 函数。

定义父组件 App

function App() {const [data, setData] = useState('');const handleDataChange = (newData) => {setData(newData);};return (<div><Son onDataChange={handleDataChange} /><p>父组件接收到的数据: {data}</p></div>);
}

解释：

• App 是一个函数组件。
• 使用 useState 钩子定义了一个状态变量 data，初始值为空字符串 ''。useState 返回一个数组，包含当前状态值 data 和更新状态的函数 setData。
• 定义了一个 handleDataChange 函数，它接受一个参数 newData。在这个函数中，调用 setData(newData) 更新状态 data。
• 在 return语句中，返回了一段包含子组件 Son的 JSX。
  • 通过 onDataChange={handleDataChange}，将 handleDataChange 函数作为 onDataChange 属性传递给子组件 Son。
  • 包含一个段落元素 <p>，显示父组件接收到的数据 data。

导出父组件 App

export default App;

**解释：**使用 export default App; 将 App 组件作为默认导出，以便在其他文件中导入并使用它。

数据流

在这个例子中，数据流是双向的：

1. 父组件向子组件传递数据：
   • 父组件 App 将 handleDataChange 函数通过 onDataChange 属性传递给子组件 Son。
2. 子组件向父组件传递数据：
   • 子组件 Son 在按钮点击时，调用 props.onDataChange('子组件传递的数据')，将数据 '子组件传递的数据' 传递给父组件。
   • 父组件的 handleDataChange 函数接收数据并调用 setData(newData) 更新父组件的状态。
   • 状态更新后，父组件重新渲染，显示最新的 data。

三、兄弟组件之间的通信

1. 基本概念

兄弟组件之间的通信通常需要借助于它们的共同父组件。兄弟组件通过父组件共享状态或通过回调函数实现通信。

2. 示例代码

import React, { useState } from 'react';function BrotherA(props) {const handleClick = () => {props.onDataChange('BrotherA的数据');};return <button onClick={handleClick}>传递数据给BrotherB</button>;
}function BrotherB(props) {return <p>BrotherB接收到的数据: {props.data}</p>;
}function App() {const [data, setData] = useState('');const handleDataChange = (newData) => {setData(newData);};return (<div><BrotherA onDataChange={handleDataChange} /><BrotherB data={data} /></div>);
}export default App;

3. 详解

在上面的示例中：

• 父组件 App 定义了一个状态 data，以及一个处理数据变化的回调函数 handleDataChange。
• 兄弟组件 BrotherA 和 BrotherB 都通过 props 接收父组件传递的数据或回调函数。
• BrotherA 通过调用回调函数 props.onDataChange 传递数据给父组件。
• 父组件通过更新状态，将数据传递给 BrotherB，实现兄弟组件之间的通信。

四、跨层级组件之间的通信

1. 基本概念

当需要跨越多个层级的组件之间进行通信时，可以使用React的上下文（Context）API。上下文API允许你在组件树中共享数据，而不必显式地通过每一级组件传递 props。

2. 创建上下文

import React, { createContext, useContext, useState } from 'react';const MyContext = createContext();function Parent() {const [data, setData] = useState('初始数据');return (<MyContext.Provider value={{ data, setData }}><Child /></MyContext.Provider>);
}function Child() {return <Grandchild />;
}function Grandchild() {const { data, setData } = useContext(MyContext);const handleClick = () => {setData('更新后的数据');};return (<div><p>接收到的数据: {data}</p><button onClick={handleClick}>更新数据</button></div>);
}export default Parent;

3. 详解

在上面的示例中：

• 创建了一个上下文 MyContext。
• 父组件 Parent 使用 MyContext.Provider 提供数据 data 和更新函数 setData。
• 子组件 Child 和孙组件 Grandchild 通过上下文共享父组件的数据和更新函数。
• Grandchild 使用 useContext(MyContext) 获取上下文数据，并通过调用 setData 更新数据。

---