Это одна из самых фундаментальных проблем, которые вам, вероятно, нужно знать в React. Другой термин для немого компонента и интеллектуального компонента - это компонент представления и компонент контейнера.
Тупой компонент (презентационный компонент)
Этот компонент отвечает только за то, чтобы представить что-то в DOM. Внутри этого компонента не будет никакой логики, поэтому он называется тупым компонентом.
Поскольку тупой компонент фокусируется только на презентации (компонент пользовательского интерфейса), в идеале это будет наиболее многоразовый компонент.
Этот компонент часто является просто функциями Javascript и имеет только метод render (). У него также нет никаких перехватчиков состояния или жизненного цикла. Тем не менее, он по-прежнему может получать некоторые данные и работать от родителей через реквизиты.
const header = (props) => {
return (
<div>
<h1> {props.title} </h1>
</div>
)
}
Смарт-компонент / компонент с отслеживанием состояния (компонент-контейнер)
Умный компонент, с другой стороны, отслеживает состояние и заботится о том, как все работает.
Компонент контейнера по-прежнему получает данные или функцию через свойства и может передавать их другому интеллектуальному компоненту или немому компоненту в качестве свойств.
Шаблон компонента контейнера представляет собой компоненты на основе классов и имеет функции constructor (). Обычно мы инициализируем состояние внутри конструктора, хотя вы можете удалить конструктор и при этом сохранить состояние.
class Page extends Component {
constructor(props) {
super(props);
this.state = {
firstTimeLoading: true,
}
}
render() {
return (
{this.state.firstTimeLoading && <Header title={this.props.title}/>}
{this.state.firstTimeLoading || <Header title="Welcome Again"/>}
);
}
}
Заключение
Использование этого шаблона проектирования хорошо, потому что оно позволяет разделить проблемы. Теперь дизайнер может работать с UI Component / Dumb Component без необходимости знать всю логику. Это также делает компонент более пригодным для повторного использования: вы можете передать другую логику одному и тому же компоненту или использовать ту же логику для другого компонента.
