文章目录
在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>
<Son
name={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>
<Son
name={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 组件作为默认导出，以便在其他文件中导入并使用它。
数据流
在这个例子中，数据流是双向的：
- 父组件向子组件传递数据：
- 父组件
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;
3. 详解
在上面的示例中：
- 创建了一个上下文
MyContext。 - 父组件
Parent使用MyContext.Provider提供数据data和更新函数setData。 - 子组件
Child和孙组件Grandchild通过上下文共享父组件的数据和更新函数。 Grandchild使用useContext(MyContext)获取上下文数据，并通过调用setData更新数据。
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
