React の stateless functional component 基本の”キ”

公開日:2019-04-18
最終更新:2019-04-18

この記事は、React を勉強し始めた Rubyist が、React を使っていて「良さそう」と思ったところを話すシリーズです。


React をいじっていると、いくつかコンポーネントの書き方があるということに気づくと思います。
React.Componentextend して、クラス内で state などを管理できる stateful component なんかは、チュートリアルの最初に書いてある基本的なところです。
ただしこれは、 state を自分で管理しなければならない(=その分だけ複雑になる)ことを意味します。できれば、そういうコードはなるべく減らしたいですよね。

自分はちょっと大きめな React コンポーネントを書く時、ベースとなる stateful なクラスを用意して、細かい部分を function に切り出すという手法を好んで使っています。例えば以下のような感じ。

import React, { Component } from "react";  
import PropTypes from "prop-types";  
import Header from "components/Header";  

export default class App extends Component {  
  constructor(props) {  
    super(props);  

    this.state = {  
      user: props.user,  
    };  
  }  

  render() {  
    const { user } = this.state;  

    return (  
      <div id="app">  
        <Header user={user} />  
      </div>  
    );  
  }  
}  
import React from "react";  
import PropTypes from "prop-types";  
import Logo from "logo";  

export default const Header = (props) -> {  
  const { user } = props;  
  render (  
    <div className="header">  
      <Logo/>  
      <div className="user-info">  
        <span className="user-info__name">{user.name}</span>  
      </div>  
    </div>  
  );  
};  

Header.propTypes = {  
  user: PropTypes.object,  
};  

このコードは、 user を親クラスの Appstate として持ち、それを Header に渡す、というものです。
Header が読み込んでいる user は、親クラスのコンポーネントでアップデートが走るたびにレンダリングされるため、変わったら自動的に更新されます。
つまり、自身が何かしらの状態を持つということが無く、管理が非常に簡単です。

データを継承していって、上位クラスが更新されたら下にも情報が行き渡る、みたいなイメージ。川の流れみたいなものでしょうか。
親クラスの function を渡すこともできるので、親クラスの state をいじることもできます。使い所を見誤らなければ便利そうです。

記事が少しでもいいなと思ったらクラップを送ってみよう!
21
+1
@tbabaの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする