Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What is going on with this article?
@Uuparu

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

More than 3 years have 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

29
Help us understand the problem. What is going on with this article?
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

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
29
Help us understand the problem. What is going on with this article?