React Componentの種類

React でのclassとfunctionの違い

  • 基本的にはfunctional component(関数コンポーネント)で書いた方が推奨されているらしい
functional compornentclass component
class component のrender部分だけ書いている感じライフサイクルメソッドを適切に使うことにより、render()制御することが可能。
状態管理によるrender()制御ができないprops、stateが使うことができる
処理が散らばりやすい

書き方の違い

functional component

import React from "react"; const Test = () => { return ( //処理 <div> <h1>{'FCの書き方!'}</h1> </div> ); }; export default Test;

class component

import React from "react"; class Test2 extends React.Component { //なくてもよい constructor(props) { super(props); this.state = {count: 100}; // stateも使える } // render() メソッドは、クラスコンポーネントで必ず定義しなければならない唯一のメソッドなので必要 render() { return ( //処理 <div>{'class compornentの書き方'}</div> ); } } export default Test2;

なぜ関数コンポーネントなのか

  • クラスコンポーネントの大きな問題はしょりが散らばりやすいこと
    • 一つのコンポーネントの一つの機能が様々なメソッドの中散らばっているということ
  • Hookは一つの機能は、ひとつのHookの中で完結する

ComponentとPureComponentの違い

  • props と stateが常に変化していれば、PureComponentを使わず、Componentを使うべし。(理由:shouldComponentUpdate内のshallowEqualも時間かかる)
  • props と stateがあまり変わらなければ、PureComponentを使うべし。
  • props と stateが変わらなければ、どちらでもOK.

shouldComponentUpdateとは

  • shallow compareをするファンクション
  • 比較対象(stateやprops)のものが人惜しいかどうか浅く確認する

比較対象がスカラー

  • そのvalue自体を比較