Reactのコンポーネントパターンについて。React component patterns

English version is below.

Reactのコンポーネントパターンというと色々な考え方がありますけど、大きく分けると3種類だけなのかなと考えています。ステートなし、ステートあり、あとはコンテナコンポーネントです。それとステートなしは2種類の書き方がありますんで、それも別々にカウントしたら4種類ですね。ちょっと実際にどんなものがあるのか見てみましょう。

先ほどもステートなしは2種類の書き方があるといいましたけど、そのうちの一つは関数型です。シンプルで書きやすいですね。既存のプロパティを引数として渡してあげることで、HTML要素に入れることができます。

パターン1 ステートなし（関数型）

function Hello(props) {
  return (<div>Hello, {props.name}</div>);
}

ちなみにES6で書いてあげると、

const Hello = (props) => (<div>Hello, {props.name}</div>);

こんな感じになります。

もう一つのステートなしはクラス型です。ステートありコンポーネントを書く時によくお世話になります。個人的にはこっちの方が好きです。

パターン1' ステートなし（クラス型）

class Hello extends React.Component {
  render() {
    return (<div>Hello, {props.name}</div>);
  }
}

パターン2 ステートあり次にステート(state)ありです。このstateの特徴ですが、クラス型でないと利用できないのと、propsに似ているもののプライベートなので、他のコンポーネントからは操作できません。ちなみに以下の例ではstate使う必要はないんですけど、とりあえずstateの紹介ということで勘弁してください。

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Taro" };
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}!</h1>
      </div>
    );
  }
}

パターン3 コンテナコンポーネント

コンテナコンポーネントとはなんぞや、ということですが。やってることは単純でデータをfetchしてそのデータをサブコンポーネントに渡してるだけです。例えば以下の例が一番シンプルでわかりやすいと思います。

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Taro" };
  }
  render() {
    return <Hello {...this.state} />;
  }
}

const Hello = (props) => (<div>Hello, {props.name}</div>);

まあざっとこんなところでしょう。

ちなみに、ライフサイクルとかについて触れ出すともっと面白いことがいっぱいできます。例えばreconciliationっていうV-DOMのコアになってるアルゴリズムがありますが、それはまた次回詳しくご紹介させていただきます。

So there are basically 3 patterns to declare React components in my opinion.: Stateless, Stateful, Container Component. And there are 2 ways to declare stateless component in addition. Well, let's see them one by one.

Previously I mentioned there are 2 ways to declare a stateless component. One way is functional style, and it is simple to write. In this way, you can take a property as an argument, then pass it to render method like below.

Pattern1 Stateless(functional style)

function Hello(props) {
  return (<div>Hello, {props.name}</div>);
}

You might see this with ES6.

const Hello = (props) => (<div>Hello, {props.name}</div>);

The other is classical style. This is the same style to write with a stateful component. I love this. Pattern 1' Stateless(classycal style)

class Hello extends React.Component {
  render() {
    return (<div>Hello, {props.name}</div>);
  }
}

Pattern2 Stateful Next one is a stateful component. Note In this 'state', you can only with classical style. And although it is similar to props, it is private and cannot change the data from other components. Besides, in the following example, it is unnecessary to use a stateful, but let me just use for this introduction.

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Taro" };
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}!</h1>
      </div>
    );
  }
}

Pattern3 Container Component WTF is container component!? It is really simple what it does. It simply fetches data, and pass it down to the sub-component. That's all. The following example is hellpful to understand.

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Taro" };
  }
  render() {
    return <Hello {...this.state} />;
  }
}

const Hello = (props) => (<div>Hello, {props.name}</div>);

That's all this time. Looks easy to understand? I hope so. And once we dive into React's lifecycle, there are a lot of fun! For example, taking a look about a reconciliation that is the core algorithm of V-DOM, you might have a lot of aha moments! Well, let's dive into it next time.

Resources:

reactjs.org

www.youtube.com