React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React组件通信

React中实现组件通信的几种方式小结

作者：好好吃饭e

在构建复杂的React应用时,组件之间的通信是至关重要的,从简单的父子组件通信到跨组件状态同步,不同组件之间的通信方式多种多样,下面我们认识react组件通信的几种方式,需要的朋友可以参考下

前言

下面我们认识react组件通信的几种方式。

在构建复杂的React应用时，组件之间的通信是至关重要的。从简单的父子组件通信到跨组件状态同步，不同组件之间的通信方式多种多样。

1. 父子组件通信

父子组件通信是 React 中最基本的通信方式之一。在这种模式下，数据是从父组件通过 props 传递给子组件的，子组件接收到 props 后进行渲染或其他操作。

特点：

父组件：

// 父组件

import React, { Component } from 'react'
import CChild from "./components/C-Child"

export default class CApp extends Component {
    state = {
        msg: '这是父组件的数据'
    }
    
    render() {
        return (
            <div>
                <h2>父组件</h2>

                <CChild msg={this.state.msg} />
            </div>
        )
    }
}

子组件：

// 子组件
import React, { Component } from 'react'

export default class CChild extends Component {
    render() {
        return (
            <div>
                <h4>子组件</h4>
                <p>{this.props.msg}</p>
            </div>
        )
    }
}

2. 子父组件通信

子父组件通信是指子组件向父组件传递数据或事件的过程。通常通过在子组件中定义回调函数，并将其作为 props 传递给子组件来实现。

特点：

父组件 PApp：

在 render 方法中，PApp 渲染一个 PChild 子组件，并将 callback 方法作为 cb 属性传递给子组件。

//父组件PApp
import React, { Component } from 'react'
import PChild from './components/PChild'

export default class PApp extends Component {
    state = {
        msg: ''
    }

    callback = (newMsg) => {
        console.log('拿到子组件的数据: ' + newMsg);
        this.setState({
            msg: newMsg
        })
    }

    render() {
        return (
            <div>
                <h2>父组件 --- {this.state.msg}</h2>
                // 将回调函数传递给子组件 
                <PChild cb={this.callback} />
            </div>
        )
    }
}

子组件 PChild:

 //子组件PChild
import React, { Component } from 'react'

export default class PChild extends Component {
    state = {
        msg: '来自子组件的数据'
    }
    
    // 处理按钮点击事件，调用父组件传递的回调函数
    handler = () => {
        this.props.cb(this.state.msg)// 将子组件的数据传递给父组件
    }

    render() {
        return (
            <div>
                <h4>子组件</h4>
                <button onClick={this.handler}>传递</button>
            </div>
        )
    }
}

使用示例

点击传递按钮前：

点击传递按钮后：

3. 兄弟组件通信

兄弟组件通信是指不具有直接父子关系的两个组件之间进行数据传递和交互的过程。在 React 中，通常需要通过共享父组件来实现兄弟组件之间的通信。

注意：兄弟组件使用共同的父类作为桥梁，本质是父子之间通信。

import React, { Component } from 'react';
import BrotherA from "./components/BrotherA";
import BrotherB from "./components/BrotherB";

class BApp extends Component {
    state = {
        message: 'hello'
    }
    
    // 回调函数，用于更新 message 状态
    // 注意：React 中状态更新通常使用 setState 方法
    fn = (newMsg) => {
        console.log('父组件收到：' + newMsg);
        this.setState({
            message: newMsg
        })
    }
    
    render() {
        return (
            <div>
                <h1>父组件</h1>
                {/* 将 fn 方法作为 props 传递给 BrotherA 组件 */}
                <BrotherA cb={this.fn} />
                {/* 将 message 状态作为 props 传递给 BrotherB 组件 */}
                <BrotherB message={this.state.message} />
            </div>
        );
    }
}

export default BApp;

import React from 'react';

const BrotherA = props => {
    const msg = '来自子组件A的数据'

    const handle = () => {
        props.cb(msg)
    }
    return (
        <div>
            <h4 onClick={handle}>子组件A</h4>
        </div>
    );
};

export default BrotherA;

import React from 'react';

const BrotherB = props => {
    return (
        <div>
            <h4>子组件B -- {props.message}</h4>
        </div>
    );
};

export default BrotherB;

接下来我们验证一下：点击子组件A

点击之后如图结果：

4. 使用Context进行跨层级组件通信

当组件层级较深或通信的组件距离较远时，可以使用React的Context API进行跨层级通信。Context允许我们在组件树中传递数据，而不必手动通过Props一层层传递。

创建：

context.js

import React from 'react';

// 创建一个上下文对象
const { Provider, Consumer } = React.createContext();

// 导出 Provider 和 Consumer 组件，以便在其他地方使用
export {
    Provider,
    Consumer
}

BApp

// BApp.jsx

import React, { Component } from 'react';
import BrotherB from "./components/BrotherB";

import { Provider } from "./context.js";

class BApp extends Component {
    state = {
        message: 'hello react', // 初始化状态值
    }

    render() {
        return (
            // 使用 Provider 组件提供数据
            <Provider value={this.state.message}>
                <div>
                    <h1>父组件</h1>
                    {/* 渲染子组件 */}
                    <BrotherB />
                </div>
            </Provider>
        );
    }
}

export default BApp;

BrotherB

// BrotherB.jsx

import React from 'react';

import { Consumer } from '../provider.js';

const BrotherB = props => {

    return (
        // 使用 Consumer 组件消费数据
        <Consumer>
            {value => (
                <div>
                    {/* 使用从 Provider 传递下来的值进行渲染 */}
                    <h4>子组件B -- {value}</h4>
                </div>
            )}
        </Consumer>
    );
};
export default BrotherB;

补充

在 Consumer 组件内部，我们可以使用函数作为子组件

<Consumer>
  {value => (
    // 在这里可以直接使用 value 进行渲染或处理
    <div>
      <h4>子组件B -- {value}</h4>
    </div>
  )}
</Consumer>

在这个示例中，<Consumer> 组件的子元素是一个函数，该函数接收 value 参数，这个 value 参数就是从 Provider 传递下来的值。在函数内部，可以直接使用 value 进行渲染或处理。

这种方式适用于在 JSX 内部直接定义渲染逻辑，通常更易读，因为它直接放在了 <Consumer> 标签内部。

效果图：

这样，就实现了 BApp 组件向 BrotherB 组件传递数据的功能。 Context API 的优点之一就是可以让组件之间直接传递数据，而无需通过 props 一层层地传递，从而简化了组件之间的关系。

到此这篇关于React中实现组件通信的几种方式小结的文章就介绍到这了,更多相关React组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文