すべて個人的な考えです。
Template を使って適切な位置に要素を配置する
例えば以下のDetailTemplateは Abstract Class で、HeaderとMainは Abstract Property です。そしてそれらコンポーネントは、間取りはどんな感じか分からないですが、とりあえず適切な位置に配置されるようになっています。
class FooPageContents extends DetailTemplate {
// H1 は Atom
Header = () => タイトル
;
// Article は Organizm
Main = () => ;
}
const FooPage = () => {
return 様々な副作用を担当
例えば、<header>の中身を変更するとかもこの層の役目です。
const FooPage = () => {
React.useEffect(() => {
document.title = 'foo - site'
}, []);
return ちなみにNextJSならマークアップだけで済みます。
import Head from 'next/head';
const FooPage = () => {
return (
<>
foo - site
Redux を使っているなら Observer や共通するイベントの処理はこの層で適切にdispatchすることで管理し、各 Organizm や Molecule でそれらを乱立しあまり負荷を掛けない作りにすると良いと思います。
import ObserverContext from '...';
// const ObserverContext = React.createContext();
const FooPage = () => {
const observer = React.useMemo(() => {
return new IntersectionObserver(entries => {
/*...*/
});
}, []);
React.useEffect(() => () => {
observer.disconnect();
});
return (
