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

文章目录

- 一、父组件向子组件传递数据
- - 1. 基本概念
  - 2. 示例代码
  - 3. 详解
  - - 定义子组件 `Son`
    - 定义父组件 `App`
    - 导出父组件 `App`
    - 数据流
    - `props` 的内容
- 二、子组件向父组件传递数据
- - 1. 基本概念
  - 2. 示例代码
  - 3. 详解
  - - 引入React库和useState钩子
    - 定义子组件 `Son`
    - 定义父组件 `App`
    - 导出父组件 `App`
    - 数据流
- 三、兄弟组件之间的通信
- - 1. 基本概念
  - 2. 示例代码
  - 3. 详解
- 四、跨层级组件之间的通信
- - 1. 基本概念
  - 2. 创建上下文
  - 3. 详解

在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 元素 。

定义父组件 `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={this is span} 传递 JSX 元素 this is 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 将返回 this is 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。
- 包含一个段落元素 ，显示父组件接收到的数据 data。

导出父组件 `App`

export default App;

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

数据流

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

父组件向子组件传递数据：
- 父组件 App 将 handleDataChange 函数通过 onDataChange 属性传递给子组件 Son。
子组件向父组件传递数据：
- 子组件 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;