React 组件之间的紧密耦合

Question

I've been working with react for a little while, and I found out react components heavily depend on one another which is not a good practice in my opinion. My question is whether there is a way to work around this.

Let's look at an example below where Header component depends on Banner component

import Banner from './../banner/Banner';
import HeaderInfo from './HeaderInfo';

class Header extends Component {
  render() {
    return (
      <div id="header">
        <Banner />
        <HeaderInfo />
      </div>
    ); 

  }
}

Suppose that there are 10 other components depending on Banner component, so if there are any changes to Banner component, for instance, adding a new prop, say, avatarUrl="/path/to/img" then Header component and all the 10 components would need to be altered to cater for the changes as follows

class Header extends Component {
  render() {
    return (
      <div id="header">
        <Banner avatarUrl="/path/to/img" />  // <--- new changes
        <HeaderInfo />
      </div>
    ); 

  }
}

This would lead to a nightmare when the number of components grows and changes need to be done in that situation. The aforementioned way of importing and using components results in tight coupling among components which contradicts to a norm that there should be tight cohesion within a component and loose coupling among components.

I wonder if there's another way to connecting and using components that makes the dependence among component loose.

Thanks.

Answer 1

If you are concerned about the states dependencies, both Redux & context API will be a good solution. If you are talking about the de-coupling of components, render props will be the thing you want to check.

Answer 2

Currently if any props needs to be passed to Banner component. Its has to be passed from Header component. This is using local state.

But to overcoming this issue, we have redux store. Everything is stored in redux store. And when any value is needed in banner component. Instead of passing from Header component, we can direct access from Banner component itself. (connecting to the store from Banner component).

Reference: https://redux.js.org/basics/store