使用 React Context 与 Event Bus 连接深度嵌套的独立组件

Question

So I have a few deeply nested independent components that need to communicate with each other. For example I have a news overview which contains a feed, which can be collapsed/hidden from the navigation. The navigation is at a completely different place within the DOM than the news feed, hence passing props isn't really possible.

Since I have these kind of dependencies with multiple components, I have implemented a React Context for now to handle these states. To reach each and every component the context wraps the whole app.

Is this a good practice or should I go for a kind of EventBus instead?

const eventBus = {
  on(event, callback) {
    // ...
  },
  dispatch(event, data) {
    // ...
  },
  remove(event, callback) {
    // ...
  },
};

vs

<CustomThemeProvider>
     <Component {...pageProps} /> // app
</CustomThemeProvider>

What's the best practice here?

Answer 1

Consider this code fragment:

      //providers
      <AccountContext.Provider value={{...this.state, onAccountLastVisited}}>
          ...
          <VersionContext.Provider value={{...this.state, onUpdateVersion}}>
              ...
              <TrackingContext.Provider value={{...this.state, onCodeTracking}}>
                  ...
                  <NotificationContext.Provider value={{...this.state, onSendNotification}}>

      //consumers
      <AccountContext.Consumer>{accContext=> {
          ...
          <VersionContext.Consumer>{verContext=> {
              ...
              <TrackingContext.Consumer>{trkContext=> {
                  ...
                  <NotificationContext.Consumer>{nftContext=> {
                      const {onAccountLastVisited} = accContext;
                      const {onUpdateVersion     } = verContext;
                      const {onCodeTracking      } = trkContext;
                      const {onSendNotification  } = nftContext;
                      ...
                      ... onSubmit={()=> {
                              onAccountLastVisited(eventData);
                              onUpdateVersion     (eventData);
                              onCodeTracking      (eventData);
                              onSendNotification  (eventData);
                          };}

1. That looks ugly asf.

2. Tightly coupled with the knowledge of components outside everywhere.

3. Component is polluted and you have to come back to edit this thing whenever you come up with a new context provider/consumer.

Don't know about you, but it hurts my eyes.

Now on the other hand:

    //listener
    EventBus.on('TaskForm.submitClick', onAccountLastVisited);
    ...

    //caller
    ... onSubmit={()=> {
        EventBus.dispatch('TaskForm.submitClick', eventData);
    }

That's it.

1. Now this component knows nothing about its parents or providers, completely decoupled.

2. Very clean. Any context module can listen to the event and do the context update.

3. Doesn't matter if your component event is travelling up, down, or side ways.

I DO NOT see why we don't use the event bus. Full disclosure here, I am not a React expert. If anyone can give me a better reason why I should stick with the providers, I am all ears.