Is using Context for communication between compone

问题:

After reading the official documentation about context (https://reactjs.org/docs/context.html), I have a feeling its use should mostly be limited to the situations when we have some variables we could consider "global" that we must send to many components on different nesting levels (like current theme, locale, currently authenticated user).

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

and

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

I would like to use Context to facilitate communication between components that are far from each other in the component tree. Many users used Redux for that (though it's not its main purpose), which was not similarly discouraged, even though when used with React (through react-redux package) such an approach is internally powered by Context.

Is there any disadvantage that Context has compared to redux + react-redux (barring the fact that Redux has a different way to update state) that should make me not use Context in the described scenario? The docs say it makes component reuse more difficult. How does it do it, and isn't this con also relevant to redux + react-redux duo?

回答1:

It is not discouraged and can be used for component communication at different levels of nesting.

Is there any disadvantage that Context has compared to redux + react-redux (barring the fact that Redux has a different way to update state) that should make me not use Context in the described scenario? The docs say it makes component reuse more difficult.

React context can be less convenient to debug because it currently cannot make use of Redux devtools. There's an issue that can be watched, yet any possible solution can't cover interactions through context API that are performed with callback functions, e.g. this modal example, while dispatched Redux actions can be tracked.

The documentation doesn't explain why it is difficult to reuse, and 'difficult' is subjective. A component that relies on the context imposes hidden dependency on respective Provider in component hierarchy. It is loosely coupled to it yet it may malfunction if there's no expected provided value; if there's no Provider, Consumer is still rendered with undefined value, this behaviour cannot be changed without manual value validation.

回答2:

I'm not clear enough with your question. But considering the statement from react docs as you stated,

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

What I can see, from the docs, a caveat: you may need to lift the state up.

And there are a sorts of things need to think before using context api in your project, if you don't, you might fail. I think this is for what you can remember the statement "Apply it sparingly because it makes component reuse more difficult.". The following points are outlined in the docs how you can use the context api that could be considered re-using components for sorts of need:

• Dynamic Context
• Updating context from a nested component
• Accessing context in lifecycle methods
• Consuming context with a hoc
• Forwarding refs to context consumers

And you may obviously feel the difficulty. Otherwise, I can see, it can be used what we can do with redux except like the redux logger.