Question

我在使用React已有一段时间了，我发现React组件在很大程度上相互依赖，这在我看来不是一个好习惯。我的问题是是否有解决此问题的方法。

让我们看下面的示例，其中Header组件取决于Banner组件

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

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

  }
}

假设根据Banner组件还有10个其他组件，因此，如果Banner组件有任何更改，例如，添加一个新的prop，例如avatarUrl =“ / path / to / img”，然后添加Header组件和所有需要更改这10个组件以适应如下变化

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

  }
}

当组件的数量增加并且在这种情况下需要进行更改时，这将导致一场噩梦。前述的导入和使用组件的方式导致组件之间的紧密耦合，这与在组件内应该有紧密的内聚力以及组件之间的松散耦合的规范相矛盾。

我想知道是否还有另一种方法来连接和使用组件，从而使组件之间的依赖关系松动。

谢谢。

Answer 1

如果您担心状态依赖关系，Redux 和上下文 API 将是一个很好的解决方案。如果您正在谈论组件的解耦，那么 render props 将是您想要检查的内容。

Answer 2

当前是否需要将任何道具传递到横幅组件。它必须从Header组件传递。这是使用本地状态。

但是为了克服这个问题，我们有redux存储。一切都存储在redux存储中。并且在横幅组件中需要任何值时。代替从Header组件传递，我们可以直接从Banner组件本身进行访问。（通过Banner组件连接到商店）。

参考：https://redux.js.org/basics/store

反应组件之间的紧密耦合

2 个答案: