Help us understand the problem. What is going on with this article?

React Stateless Functional Componentを使うといい9つのポイント!(Class Based との違い)

More than 1 year has passed since last update.

それではいきます。

1 Classが必要ない

constructorをつかわなくてもいいし、コードがシンプルになる。

2 thisが必要ない

class based componentではTHISが必要だけど、functional componentではthisがいらない。thisって混乱しやすいから使わなくてもいいのはとっても楽!

// With THIS
<a onClick = {this.sayHi.bind(this)}>Say Hi</a>

// Without This
<a onClick = {sayHi}>Say Hi</a>

ちなみに、bindはstatelessのコンポーネントの場合は必要ない。

3 UIに特化できる

Stateless function componentはpresentational componentsにとって都合がいい。presentational componentというのはふるまいよりもUIに特化したコンポーネント。presentational componentでは状態を保持しない。そのため、このコンポーネント内では状態を気にする必要はない。そのかわり、親のコンポーネントで状態を保持し管理する必要がある。

4 短文ですむ

stateless functional componentにすると通常よりも最大20%コードが減る。

statefulComponent.js
import React from 'react';

default export class helloWorld extends React.Component {
  render() {
    return (
      <div>{`Hi ${name}`}</div>
    )
  };
};

statelessComponent.js
import React from 'react';

default const HelloWorld = ({name}) => (
  <div>{`Hi ${name}`}</div>
);

5 コードがより完結する

stateless functional componentを使うと、その時点で使用するデータはシンプルなargumentsに限定されるため、シンプルでより完結したコードになる。

6 バグの修正がらくだしバグを防げる

class based componentは複雑になりやすく、どこを参照しているのかわからなくなったり、どのコンポーネントからデータを持ってきているのか混乱を起こしやすい。一方、stateless componentだと明らかにどのfunctional componentとargumentsと伝達されたのかがわかりやすい。バグを防げるし、バグが起こった時も修正をしやすい。

7 高い解読性

stateless functional componentはシンプルなので理解しやすい。たとえfunctionがネストされていてもその中はシンプル。

8 テストのしやすさ

functionはシンプルでテストの宣言もとてもストレート。独立してテストができ、モックも必要がなく、トリッキーなテストの技術も必要ない。

9 パフォーマンス性

パフォーマンスが高く、ライフサクルについて心配する必要もない。

まとめ

上記の理由から、可能な時はstateless functional componentsを使うよう努力するのが賢明といえる。

個人の感想

functional componentsをできるだけ使うべきという意見もあるが、大は小をかねるの考えでいくなら、1ファイル1つ、class based componentを作り、そこにfunctionを加えたい場合はstateless functional componentを作るという考えもあるのでは。functional componentを作ってからstateを使用する必要性に迫られて書き直すのも手間かかりそう。
個人的には、1ファイル1class based component、stateが不必要なことが明確な場合はstateless functional componentを使いたい。

引用
https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away