react组件通信看这一篇就够了

简介: react组件通信看这一篇就够了

1. 前言

  1. 组件通信 不管在哪个框架里面 基本都属于最基本,最常用的了,那就唠唠吧

2. 是什么 what

  1. 组件通信 那就是组件之间进行通信嘛
  2. 组件之间有各种关系 父子 兄弟 跨级等
  3. 通信就是 互相聊天 有来有往

3. 场景总结

  • 不总结场景回答的就太木有逻辑性了
  1. 父组件向子组件传递
  2. 子组件向父组件传递
  3. 兄弟组件之间的通信
  4. 父组件向后代组件传递
  5. 非关系组件传递

4. 父组件向子组件传递

1.React的数据流动为单向的,父组件向子组件传递是最常见的方式

  1. 父组件在调用子组件的时候,只需要在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const data = 'Hello, Child!';
  return (
    <div>
      <ChildComponent data={data} />
    </div>
  );
};
// ChildComponent.jsx
import React from 'react';
const ChildComponent = (props) => {
  return <div>{props.data}</div>;
};
export default ChildComponent;
  • 父组件向子组件传递 就是 通过 props

5. 子组件向父组件传递

1.父组件

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const [message, setMessage] = useState('');
  const handleMessage = (msg) => {
    setMessage(msg);
  };
  return (
    <div>
      <h1>Parent Component</h1>
      <p>Message from child: {message}</p>
      <ChildComponent onMessage={handleMessage} />
    </div>
  );
};
export default ParentComponent;

子组件

import React from 'react';
const ChildComponent = ({ onMessage }) => {
  const handleClick = () => {
    onMessage('Hello from child!');
  };
  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={handleClick}>Send Message to Parent</button>
    </div>
  );
};
export default ChildComponent;
  1. 组件ParentComponent通过将一个回调函数 handleMessage 作为 onMessage 属性传递给子组件ChildComponent
  2. 子组件内部的按钮点击事件会触发handleClick 函数,
  3. 然后调用父组件传递的回调函数 onMessage,将消息作为参数传递给父组件。
  4. 父组件接收到消息后,更新状态并在页面上显示

6. 兄弟组件之间通信-Context

  1. 通过创建上下文提供者和使用上下文消费者实现跨组件层级的数据传递
  2. 代码

// DataContext.js
import React from 'react';
const DataContext = React.createContext();
export default DataContext;
// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';
import DataContext from './DataContext';
const ParentComponent = () => {
  const data = 'Hello, Child!';
  return (
    <DataContext.Provider value={data}>
      <ChildComponent />
    </DataContext.Provider>
  );
};
// ChildComponent.jsx
import React, { useContext } from 'react';
import DataContext from './DataContext';
const ChildComponent = () => {
  const data = useContext(DataContext);
  return <div>{data}</div>;
};
export default ChildComponent;

7. 非关系组件传递 -redux

  1. 代码

// actions.js
export const setData = (data) => ({
  type: 'SET_DATA',
  payload: data,
});
// reducers.js
const initialState = {
  data: '',
};
export const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
};
// ParentComponent.jsx
import React from 'react';
import { connect } from 'react-redux';
import { setData } from './actions';
const ParentComponent = (props) => {
  const handleClick = () => {
    props.setData('Hello, Child!');
  };
  return (
    <div>
      <button onClick={handleClick}>Set Data</button>
    </div>
  );
};
const mapDispatchToProps = { setData };
export default connect(null, mapDispatchToProps)(ParentComponent);
// ChildComponent.jsx
import React from 'react';
import { connect } from 'react-redux';
const ChildComponent = (props) => {
  return <div>{props.data}</div>;
};
const mapStateToProps = (state) => ({
  data: state.data,
});
export default connect(mapStateToProps)(ChildComponent);
  1. 轻松搞定 reduxjs/toolkit


8.  通信方式表格对比

方式 描述 使用场景 优点 缺点
Props 通过父组件向子组件传递数据 单向数据流、父子组件之间的简单通信 简单易用,适用于简单组件间的通信 只适用于父子组件之间的通信,组件层级较深时传递麻烦
Context 创建上下文提供者和使用上下文消费者实现跨组件层级的数据传递 跨组件层级的数据共享,避免逐层传递数据 可以避免 Props 层层传递的麻烦 上下文的更新会引发整个消费者子树的重新渲染,性能开销较大
Redux 使用状态管理库Redux进行全局状态管理,实现组件之间的通信 多个组件共享状态、组件之间的复杂通信 全局状态管理,方便组件之间的通信和状态共享 代码复杂,需要引入额外的依赖和配置,对于简单场景会增加开发成本
EventEmitter 使用事件订阅-发布模式,通过事件触发和监听实现组件之间的通信 非父子组件之间的通信、跨组件层级的通信 灵活、适用于非父子组件之间的通信 事件订阅和发布的管理可能较为复杂,不易维护
Callback 通过回调函数将数据传递给父组件或其他组件 子组件向父组件传递数据或组件之间的双向通信 简单明了,适用于父子组件之间的通信或组件之间的双向通信 如果层级较深,需要逐层传递回调函数,可能导致代码冗余和维护困难
Refs 通过引用ref来直接访问子组件的实例或DOM元素,实现父组件对子组件的操作或访问 访问子组件的实例或DOM元素、触发子组件的方法 可以直接访问子组件的实例或DOM元素,灵活性高 破坏了React的数据流一致性,不推荐过度使用

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
1月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
47 0
|
26天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
24 0
|
21天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
9 0
|
23天前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
26天前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
63 1
|
26天前
|
资源调度 前端开发 JavaScript
React组件
React组件
37 0
|
30天前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
30天前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
|
1月前
|
存储 前端开发 JavaScript
React组件中如何通讯
React组件中如何通讯
11 0
|
1月前
|
前端开发
react 使用 antd-mobile组件库实现下滑加载数据
react 使用 antd-mobile组件库实现下滑加载数据

相关产品

  • 云迁移中心