React 七种组件通信方式总结

前言

在 React 开发的世界里，组件之间的通信无疑是一个至关重要的话题。React 的设计理念使得我们的代码更加模块化和灵活，但也因此带来了组件通信的多样性和复杂性。如何在这些众多的通信方式中选择最适合自己项目的呢？这不仅仅是技术上的考量，更是对代码可维护性和用户体验的深思熟虑。

回顾我们在开发过程中遇到的种种挑战，正是这些组件通信方式帮助我们解决了许多难题。从最基础的 Props 传递，到灵活的回调函数，再到强大的 Redux 状态管理，每一种通信方式都有其独特的魅力和适用场景。它们如同工具箱中的利器，在我们面对复杂的项目需求时，为我们提供了不同的解决方案。

本文将带领大家一起探索这些 React 组件通信方式，了解它们的优缺点和使用场景。下面我们来看看这些组件的通信方式吧！

Props

Props 是 React 组件之间传递数据的一种机制，允许父组件向子组件传递数据和方法。

javascript

// Parent.js
import React from 'src/pages/blog/react/index';
import Child from './Child';

function Parent() {
  const message = 'Hello from Parent!';
  return <Child message={ message }/>;
}

// Child.js
import React from 'src/pages/blog/react/index';

function Child(props) {
  return <div>{ props.message }</div>;
}

在这个示例中，Parent 组件通过将 message 数据通过 props 传递给 Child 组件，Child 组件接收到这个数据并在页面上展示出来。

回调函数

通过将一个回调函数作为 props 传递给子组件，子组件可以在适当的时机调用该回调函数，从而将数据传递回父组件。

javascript

// Parent.js
import React, { useState } from 'react';
import Child from './Child';
function Parent() {
  const [data, setData] = useState('');
  // 定义回调函数，用于接收子组件传递的数据
  const handleChildData = (dataFromChild) => {
    setData(dataFromChild);
  };
  return (
    <div>
      <Child onData={handleChildData} />
      <p>Data from Child: {data}</p>
    </div>
  );
}

// Child.js
import React from 'react';
function Child(props) {
  const sendDataToParent = () => {
    // 在适当的时机调用父组件传递的回调函数，并传递数据作为参数
    props.onData('Data from Child!');
  };
  return <button onClick={sendDataToParent}>Send Data</button>;
}

在这个示例中，Child 组件通过 props 接收一个名为 onData 的回调函数，然后在按钮点击时调用该回调函数，并将数据作为参数传递给 Parent 组件，从而实现了子组件向父组件传递数据的通信。

Ref

在 React 中，ref 是用于访问 DOM 元素或类组件实例的一个特殊属性。虽然 ref 主要用于访问 DOM 元素，但也可以用来进行组件间通信。通过 ref，你可以在父组件中获取对子组件的引用，从而直接调用子组件的方法或访问其状态。

javascript

// Parent.js
import React, { useRef } from 'react';
import Child from './Child';
function Parent() {
  // 创建一个 ref 对象
  const childRef = useRef(null);
  const sendDataToChild = () => {
    // 通过 ref.current 获取子组件的引用，并调用其方法
    childRef.current.displayMessage('Data from Parent!');
  };
  return (
    <div>
      <button onClick={sendDataToChild}>Send Data to Child</button>
      <Child ref={childRef} />
    </div>
  );
}

// Child.js
import React, { forwardRef, useImperativeHandle } from 'react';
const Child = forwardRef((props, ref) => {
  // 定义子组件内部的状态
  const [message, setMessage] = React.useState('');
  // 定义子组件的方法，可以被父组件调用
  const displayMessage = (data) => {
    setMessage(data);
  };
  // 使用 useImperativeHandle 将子组件的方法暴露给父组件
  useImperativeHandle(ref, () => ({
    displayMessage,
  }));
  return <div>Message from Parent: {message}</div>;
});

在这个示例中，Parent 组件通过 useRef 创建了一个 childRef 对象，用来存储对 Child 组件的引用。然后，通过将 childRef 传递给 Child 组件的 ref 属性，将对子组件的引用传递给了父组件。

在 Child 组件中，我们使用了 forwardRef 来允许 ref 属性传递给内部的子组件。然后，使用 useImperativeHandle hook 将子组件的 displayMessage 方法暴露给父组件，从而允许父组件直接调用子组件的方法。

注意事项：

使用 ref 进行组件间通信可以在某些特定场景下非常有用，但应该谨慎使用，尽量遵循 React 的数据流向原则，避免过度依赖 ref 来进行组件通信。

Context

React 中的 Context 是一种用于实现跨组件层级的数据传递的特性。通过 Context，您可以在组件树中直接传递数据，而不需要通过 props 一层一层地手动传递。这样，您可以在组件间实现高效的数据共享和通信。

javascript

// MyContext.js
import React from 'react';
// 创建一个 Context 对象
const MyContext = React.createContext();
export default MyContext;

// Parent.js
import React, { useState } from 'react';
import Child from './Child';
import MyContext from './MyContext';

function Parent() {
  const [message, setMessage] = useState('');

  const handleChildData = (dataFromChild) => {
    setMessage(dataFromChild);
  };

  return (
    <MyContext.Provider value={message}>
      <Child onData={handleChildData} />
      <p>Data from Child: {message}</p>
    </MyContext.Provider>
  );
}

export default Parent;

// Child.js
import React, { useContext } from 'react';
import MyContext from './MyContext';
function Child(props) {
  const message = useContext(MyContext);
  const sendDataToParent = () => {
    props.onData('Data from Child!');
  };
  return (
    <div>
      <button onClick={sendDataToParent}>Send Data</button>
      <p>Data from Parent: {message}</p>
    </div>
  );
}

export default Child;

在这个示例中，我们先创建了一个 Context 对象 MyContext。然后在 Parent 组件中，通过 MyContext.Provider 包裹子组件，将 message 状态作为 value 传递给 Context。这样，Child 组件就能够通过 useContext(MyContext) 获取到 Context 中的数据 message。

在 Child 组件中，我们使用 useContext hook 获取了 Context 中的数据，并在按钮点击时通过 props.onData('Data from Child!') 将数据传递给父组件 Parent。

通过 Context，组件间的数据传递更加简洁和高效，尤其适用于需要在组件树中的多个层级中传递数据的场景。

注意事项：

Context 不应该被滥用，最好只在跨组件层级的数据共享场景中使用。在其他情况下，还是推荐使用 Props 或其他适合的组件通信方式。

Redux

在 React 应用中，Redux 是一种状态管理库，用于解决组件通信和状态共享的问题。Redux 通过将应用的状态存储在一个全局的单一状态树中，并使用纯函数来修改状态，实现了组件间通信和数据流的一致性。

javascript

// actions.js
export const addTodo = (text) => ({type: 'ADD_TODO',payload: { text },});

// reducers.js
const initialState = {
  todos: [],
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload.text],
      };
    default:
      return state;
  }
};
export default todoReducer;

// store.js
import { createStore } from 'redux';
import todoReducer from './reducers';
const store = createStore(todoReducer);
export default store;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import TodoList from './TodoList';
import store from './store';
function App() {
  return (
    <Provider store={store}>
      <TodoList />
    </Provider>
  );
}

// TodoList.js
import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from './actions';
function TodoList(props) {
  const { todos, addTodo } = props;
  const handleAddTodo = () => {
    addTodo('New Todo');
  };
  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  todos: state.todos,
});

const mapDispatchToProps = {
  addTodo,
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

在上面的示例中，我们首先创建了一个 Redux Store，并定义了一个 Reducer 来处理状态的变化。在 TodoList 组件中，我们通过 connect 函数将组件连接到 Redux Store，使其能够访问 todos 状态并派发 addTodo Action。在点击按钮时，会调用 handleAddTodo 函数，该函数通过 addTodo Action 将新的 Todo 添加到状态中，从而触发状态的更新。最终，TodoList 组件将根据更新后的状态重新渲染，并在页面上展示新的 Todo。

通过 Redux，组件间的数据通信变得简洁和高效，使得数据流的管理更加清晰和可控。

注意事项：

Redux 也需要更多的代码和设置，因此在小型应用或组件间通信简单的场景下，可以考虑其他更轻量级的状态管理解决方案。

消息发布-订阅

在 React 中，可以使用消息发布-订阅模式（Pub/Sub）来实现组件间的通信。消息发布-订阅模式是一种解耦的通信方式，其中一个组件作为消息的发布者（或称为事件的发起者），而其他组件可以作为消息的订阅者（或称为事件的监听者）。发布者发布消息，订阅者监听并响应这些消息，从而实现了组件间的解耦通信。在 React 中，可以使用第三方库如 pubsub-js 或 postal.js 来实现消息发布-订阅模式。

javascript

// Publisher.js
import React from 'react';
import pubsub from 'pubsub-js';
function Publisher() {
  const publishMessage = () => {
    pubsub.publish('customEvent', 'Hello from Publisher!');
  };
  return (
    <div>
      <button onClick={publishMessage}>Publish Message</button>
    </div>
  );
}
export default Publisher;

// Subscriber.js
import React, { useState, useEffect } from 'react';
import pubsub from 'pubsub-js';
function Subscriber() {
  const [message, setMessage] = useState('');
  useEffect(() => {
    // 订阅消息
    const token = pubsub.subscribe('customEvent', (msg, data) => {
      setMessage(data);
    });
    return () => {
      // 组件卸载时取消订阅
      pubsub.unsubscribe(token);
    };
  }, []);
  return (
    <div>
      <p>Received Message: {message}</p>
    </div>
  );
}
export default Subscriber;

在这个示例中，Publisher 组件作为消息的发布者，通过调用 pubsub.publish 发布了一个名为 'customEvent' 的消息，内容为 'Hello from Publisher!'。Subscriber 组件作为消息的订阅者，通过 pubsub.subscribe 方法订阅了 'customEvent' 消息，并在接收到消息后更新状态 message。当点击 Publisher 组件中的按钮时，会发布消息，Subscriber 组件会接收到消息并更新页面上显示的消息内容。

使用消息发布-订阅模式可以实现组件间的松耦合通信，不需要明确地将消息传递给特定的组件，使得组件的通信更加灵活和解耦。

注意事项

使用消息发布-订阅模式时需要注意管理订阅的生命周期，确保在组件卸载时取消订阅，避免潜在的内存泄漏问题。

全局事件

在 React 中，可以使用原生的 JavaScript 全局事件（addEventListener 和 dispatchEvent）来实现组件之间的通信。

javascript

import React, { useEffect, useRef } from 'react';

function SenderComponent() {
  const inputRef = useRef(null);
  const sendData = () => {
    const data = inputRef.current.value;
    // 创建一个自定义事件，并将数据作为事件的 detail 属性
    const customEvent = new CustomEvent('customEvent', { detail: data });
    // 触发全局事件
    window.dispatchEvent(customEvent);
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={sendData}>Send Data</button>
    </div>
  );
}

function ReceiverComponent() {
  const [receivedData, setReceivedData] = React.useState('');
  useEffect(() => {
    // 监听全局事件，并在事件触发时更新状态
    const handleCustomEvent = (event) => {
      setReceivedData(event.detail);
    };
    window.addEventListener('customEvent', handleCustomEvent);
    return () => {
      // 在组件卸载时移除事件监听
      window.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);
  return <div>Received Data: {receivedData}</div>;
}

function App() {
  return (
    <div>
      <SenderComponent />
      <ReceiverComponent />
    </div>
  );
}

export default App;

在上述示例中，SenderComponent 组件中有一个输入框和一个按钮，当按钮被点击时，会创建一个自定义事件 customEvent，并将输入框中的数据作为事件的 detail 属性。然后通过 window.dispatchEvent(customEvent) 触发该自定义事件。

ReceiverComponent 组件中使用 useEffect 来监听全局事件 customEvent，并在事件触发时更新组件的状态，显示接收到的数据。

在 App 组件中将 SenderComponent 和 ReceiverComponent 组件放在一起，当在 SenderComponent 输入框中输入数据并点击按钮后，ReceiverComponent 就会接收并显示这些数据。

使用事件总线可以实现全局事件通信，使得组件之间的通信更加灵活和解耦。

注意事项：

虽然全局事件可以实现组件之间的通信，但是在使用时要小心，避免过度使用全局事件，以免导致代码不易维护和理解。通常，推荐使用其他更明确的组件通信方式，如 Props、Context API、Redux 等。全局事件在某些特定场景下可能会有用，但要慎重使用。

总结

React 组件件通信的方式很多，每种都有每种的使用场景，下面做个简单总结：

Props

优点:父子组件间通信简单直观,属性传递明确。
缺点:多层组件传递props会繁琐,只能一方向传递数据。

回调函数

优点:可以实现子组件向父组件传递数据。
缺点:回调函数需要层层传递,代码冗余。

优点:可以直接访问子组件实例,灵活调用方法。
缺点:破坏组件封装,不够优雅,需要注意引用释放。

Context

优点:跨组件传递数据,避免层层传递props。
缺点:上下文数据会被许多组件共享,不够明确。

Redux

优点:集中管理状态,组件可订阅store数据。
缺点:需要额外的store设置,更复杂的状态管理。

发布-订阅

优点:解耦组件通信,组件间低耦合。
缺点:需要引入额外库,订阅管理复杂。

全局事件

优点:灵活的事件通信方式,解耦组件。
缺点:全局事件滥用会使程序难以维护。

总体而言,不同场景需要选择合适的通信方式,简单的父子组件间通信可以使用 Props 和回调函数,复杂数据流建议使用 Redux 或 Context 等。

React 七种组件通信方式总结 ​

前言 ​

Props ​

回调函数 ​

Ref ​

Context ​

Redux ​

消息发布-订阅 ​

全局事件 ​

总结 ​

React 七种组件通信方式总结

前言

Props

回调函数

Ref

Context

Redux

消息发布-订阅

全局事件

总结