React HOCでHeaderなどを分離させるメモ

HOC

最初はこの辺りをコンポーネントのテンプレート？的な感覚で、さらっと触っては、あまり理解していなかったところもあったのですが、メモとして記載（今もちょっと微妙なところありますが）

英語のサイトとかでみていたらこのやり方があったので一旦記載
headerコンポーネントをreact-routerとか使ってやるときに、headerコンポーネントを作って、必要な箇所にimportしては記載していくスタイルよりもHOCにして管理する方が良いという例

リファクタリング前

import React from "react";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div>
      <h3>
        <Link exact to="/">
          Home
        </Link>
      </h3>
      <h3>
        <Link to="/form">Form</Link>
      </h3>
      <h3>
        <Link to="/jokes">Jokes</Link>
      </h3>
    </div>
  );
};

export default Header;

//これを呼び出したいところに記載　今回は一番最初の画面の例
import React from "react";
import ReactDOM from "react-dom";
import { Router, Switch, Route, Link } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
import Form from "./Form";
import Header from "./Header";
import "./styles.css";

const history = createBrowserHistory();

function App() {
  return (
     <div className="App">
       <Header />
     </App>
   );
}

ReactDOM.render(
  <Router history={history}>
    <Switch>
      <Route exact path="/" component={App} />} />
      <Route path="/form" component={Form} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

//さらに別ページの例
import React, { Component } from "react";
import Header from "./Header";
class Form extends Component {
  render() {
    return (
      <div>
       <Header />
       <h3>Form</h3>
      </div>
    );
  }
}
export default Form;

リファクタリングした時の例 HOC

import React from "react";
import { Link } from "react-router-dom";

const Header = props => {
//大文字でないとダメ！
  const { Component } = props;
  return (
    <div>
      <h3>
        <Link exact to="/">
          Home
        </Link>
      </h3>
      <h3>
        <Link to="/form">Form</Link>
      </h3>
      <h3>
        <Link to="/jokes">Jokes</Link>
      </h3>
      //ここにComponentがpropsで流れてくるというイメージ
      <Component />
    </div>
  );
};

export default Header;

import React from "react";
import ReactDOM from "react-dom";
import { Router, Switch, Route, Link } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
import Form from "./Form";
import Header from "./Header";
import "./styles.css";

const history = createBrowserHistory();

function App() {
  return <div className="App" />;
}

ReactDOM.render(
  <Router history={history}>
    <Switch>
       //ここでrenderを使ってHeaderコンポーネントを呼び出す
      <Route exact path="/" render={() => <Header Component={App} />} />
      <Route path="/form" component={Form} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

import React, { Component } from "react";
import Header from "./Header";
class Form extends Component {
  render() {
    return (
      <div>
       <h3>Form</h3>
      </div>
    );
  }
}

const FormWithHeadre = () => {
  return <Header Component={Form} />;
};

export default FormWithHeadre;

ただこれでもいけるがさらに変更する際は

import React from "react";
import ReactDOM from "react-dom";
import { Router, Switch, Route, Link } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
import Form from "./Form";
import Header from "./Header";
import "./styles.css";

const history = createBrowserHistory();

function App() {
  return <div className="App" />;
}

ReactDOM.render(
  <Router history={history}>
    <Switch>
      <Route
        exact
        path="/"
        render={() => (
          <Header>
            <App />
          </Header>
        )}
      />
      <Route
        path="/form"
        render={() => (
          <Header>
            <Form />
          </Header>
        )}
      />
    </Switch>
  </Router>,
  document.getElementById("root")
);



//header.jsの部分をprops.childerenに変更
import React from "react";
import { Link } from "react-router-dom";

const Header = props => {
  return (
    <div>
      <h3>
        <Link exact to="/">
          Home
        </Link>
      </h3>
      <h3>
        <Link to="/form">Form</Link>
      </h3>
      <h3>
        <Link to="/jokes">Jokes</Link>
      </h3>
      {props.children}
    </div>
  );
};

export default Header;

このようにリファクタリングすることで、新しくHeaderコンポーネントの呼び出しが必要な箇所にいちいち書かなくてもよくなるというメリットがある！

HOCメモ

勉強しだして随分ゆっくりと理解してきているが、こういうメリットがあるんだなぁーと思うと、抵抗感やHOCについての拒否感が全くなくなった笑
昨年のあたりにさらっとやったときはとりあえず「は？これなに？」みたいなポンコツでしたが、時間と共に少しずつキャッチアップできていると感じた今日この頃でした。

Reactに関してのまとめ

少しずつパターンというか、実装の特徴的なものが掴めだしたので、完全に初心者の人にも説明できるぐらい熟練であげたいと思いますー！