react: React と AtomicDesign - Page編

React と AtomicDesign - Page編

すべて個人的な考えです。

Template を使って適切な位置に要素を配置する

例えば以下のDetailTemplateは Abstract Class で、HeaderとMainは Abstract Property です。そしてそれらコンポーネントは、間取りはどんな感じか分からないですが、とりあえず適切な位置に配置されるようになっています。

class FooPageContents extends DetailTemplate {
  // H1 は Atom
  Header = () => <H1>タイトル</H1>;

  // Article は Organizm
  Main = () => <Article in="foo" />;
}

const FooPage = () => {  
  return <FooPageContents />;
}

様々な副作用を担当

例えば、<header>の中身を変更するとかもこの層の役目です。

const FooPage = () => {
  React.useEffect(() => {
    document.title = 'foo - site'
  }, []);
  
  return <FooPageContents />;
}

ちなみにNextJSならマークアップだけで済みます。

import Head from 'next/head';

const FooPage = () => {  
  return (
    <>
      <Head>
        <title>foo - site</title>
      </Head>
      <FooPageContents />
    </>
  );
}

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 (
    <ObserverContext.Provider value={observer}>
      <FooPageContents observer={observer} />
    </ObserverContext.Provider=>
  )
}