Я немного поработал с реакцией, и обнаружил, что компоненты реакции сильно зависят друг от друга, что, на мой взгляд, не очень хорошая практика.У меня вопрос, есть ли способ обойти это.
Давайте рассмотрим пример ниже, где компонент Header зависит от компонента Banner
import Banner from './../banner/Banner';
import HeaderInfo from './HeaderInfo';
class Header extends Component {
render() {
return (
<div id="header">
<Banner />
<HeaderInfo />
</div>
);
}
}
Предположим, что есть 10 других компонентов в зависимости отКомпонент Banner, поэтому, если есть какие-либо изменения в компоненте Banner, например, добавление нового пропеллера, скажем, avatarUrl = "/ path / to / img", тогда компонент Header и все 10 компонентов должны быть изменены для обслуживанияизменения следующим образом
class Header extends Component {
render() {
return (
<div id="header">
<Banner avatarUrl="/path/to/img" /> // <--- new changes
<HeaderInfo />
</div>
);
}
}
Это может привести к кошмару, когда число компонентов возрастает, и в этой ситуации необходимо внести изменения.Вышеупомянутый способ импорта и использования компонентов приводит к плотной связи между компонентами, что противоречит норме, что должна быть плотная связь внутри компонента и слабая связь между компонентами.
Интересно, есть ли другой способ подключения и использования компонентов, который ослабляет зависимость между компонентами.
Спасибо.