求推荐React-Native中类似Xamarin MessagingService的简易工具（排除Redux）

Absolutely! You’ve got several solid options to replicate Xamarin’s MessagingService behavior in React Native without leaning on Redux. Here are the most straightforward, battle-tested approaches:

1. Roll Your Own Custom Event Emitter #

This is the closest match to Xamarin’s MessagingService—you get full control over the logic, and it’s incredibly lightweight. Just create a singleton class to manage subscriptions and message broadcasts:

// services/MessageService.js
class MessageService {
  constructor() {
    this.subscribers = new Map(); // Maps topic names to arrays of callbacks
  }

  /**
   * Subscribe to a topic with a callback
   * @param {string} topic - Name of the topic to subscribe to
   * @param {function} callback - Function to run when a message is sent to the topic
   * @returns {function} Unsubscribe function to clean up the subscription
   */
  subscribe(topic, callback) {
    if (!this.subscribers.has(topic)) {
      this.subscribers.set(topic, []);
    }
    this.subscribers.get(topic).push(callback);

    // Return an unsubscribe function to use in component cleanup
    return () => {
      const callbacks = this.subscribers.get(topic);
      const index = callbacks.indexOf(callback);
      if (index !== -1) {
        callbacks.splice(index, 1);
      }
    };
  }

  /**
   * Send a message to all subscribers of a topic
   * @param {string} topic - Name of the topic to send to
   * @param {any} payload - Data to pass to subscribers
   */
  send(topic, payload) {
    const callbacks = this.subscribers.get(topic);
    if (callbacks) {
      callbacks.forEach(callback => callback(payload));
    }
  }
}

// Export a singleton instance so all components use the same service
export default new MessageService();

Usage in Components: #

import React, { useEffect } from 'react';
import MessageService from '../services/MessageService';

function UserProfile() {
  useEffect(() => {
    // Subscribe to the 'user:updated' topic
    const unsubscribe = MessageService.subscribe('user:updated', (userData) => {
      console.log('User data updated:', userData);
      // Update your component state here with the new user data
    });

    // Clean up the subscription when the component unmounts
    return unsubscribe;
  }, []);

  return (
    // Your component JSX
  );
}

// From another component or service, send a message:
MessageService.send('user:updated', { id: 123, name: 'Kamran Akbary', email: 'example@domain.com' });

2. Use React Native's Built-in DeviceEventEmitter #

React Native ships with a global event emitter out of the box—no extra code or dependencies needed. It works similarly to a custom service:

import React, { useEffect } from 'react';
import { DeviceEventEmitter } from 'react-native';

function ThemeSwitcher() {
  useEffect(() => {
    // Subscribe to the 'theme:changed' event
    const listener = DeviceEventEmitter.addListener('theme:changed', (newTheme) => {
      console.log('Switching to theme:', newTheme);
      // Update component state to reflect the new theme
    });

    // Remove the listener when the component unmounts
    return () => listener.remove();
  }, []);

  return (
    // Your component JSX
  );
}

// Emit an event from anywhere in your app:
DeviceEventEmitter.emit('theme:changed', 'dark');

Note: Since this is a global emitter, make sure to use unique, descriptive event names (like user:updated instead of just updated) to avoid conflicts between different parts of your app.

3. Lightweight Third-Party Libraries #

If you don’t want to build your own, there are tiny, focused libraries that do exactly this job without the overhead of Redux:

mitt (200b gzipped) #

A super lightweight, zero-dependency event emitter with a simple API:

import mitt from 'mitt';

// Create a singleton emitter instance
const messageEmitter = mitt();

// Subscribe to a topic
messageEmitter.on('cart:updated', (cartItems) => {
  console.log('Cart updated:', cartItems);
});

// Emit a message
messageEmitter.emit('cart:updated', [{ id: 456, quantity: 2 }]);

// Unsubscribe
const unsubscribe = messageEmitter.on('cart:updated', () => {});
unsubscribe();

tiny-emitter #

Another minimal option with an API similar to Node.js’s EventEmitter:

import Emitter from 'tiny-emitter';

const emitter = new Emitter();

// Subscribe
emitter.on('notification:received', (notification) => {
  console.log('New notification:', notification);
});

// Emit
emitter.emit('notification:received', { title: 'Hello!', body: 'You have a new message' });

// Unsubscribe
emitter.off('notification:received');

Final Recommendation #

If you want full control and a 1:1 match to Xamarin’s MessagingService, go with the custom event emitter. If you prefer to use something pre-built and tested, mitt is an excellent choice—it’s tiny, fast, and does exactly what you need without extra fluff.

内容的提问来源于stack exchange，提问作者Kamran Akbary