超初心者のReact(create-react-app)基礎学習覚え書き②

##項目
・ライフサイクルメソッド
・importとexportモジュールの使用

##ライフサイクルメソッド
３種(Mounting,Updating,Unmounting)
・それぞれコンポーネントの配置、成長、破棄を示す
・それぞれの期間で使えるメソッドがいくつか存在する
###そもそもなんでつかうの？
関数の外(Reactコンポーネントの外)に影響を与える関数を記述する場合に使用するため

ライフサイクル内で行う一般的項目として
バーチャルDOMの内容変更、データベース通信のようなAPI通信の際、ログ出力、setState()など

どういったものかは下記の通り

####配置(WebページへのMount)
Webページにアクセスした時にReactで作ったコンポーネントが配置(生まれる)までの期間

####変更(Update)
特定の箇所をクリックすると色が変わる(ユーザーの操作)、データが書き換わることでUIが変更されるなどが発生する期間

####破棄(Unmount)
現在ページから別ページへのアクセスをした時
もとのページのコンポーネントは不要になるためコンポーネントを破棄する期間
？期間というかタイミング？

###主要なメソッドと時間軸ごとの動き方

Mounting→	Updating→	Unmounting→
constructor() 初期化(state)	↓	↓
↓	↓	↓
render() VDOMを描画 (JSXをリターン)	render() VDOMを描画	↓
↓	↓	↓
conponentDidMount() render()の後に１度だけ呼ばれる リスナーの設定やAPI通信に使用	↓	↓
-	conponentDidUpdate()再レンダー後に呼ばれるイベント	↓
-	-	componentWillUnmount()破棄される直前に呼ばれるもの リソース解放、リスナー解除他…

###実装例 👍buttonの実装
※コンポーネント中の関数名はファイル名で合わせていく
Hoge.jsが主要メソッド使用の例

Foo.jsx

import React from 'react';
import Bar from "./Bar";

const Article = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
      <LikeButton count={props.count}/>
    </div>
  )
};

Bar.jsx

import React from 'react';

const LikeButton = (props) => {
  return(
    <button id={"counter"}> 👍  {props.count}</button>
  )
}

export default Bar

Hoge.jsx

import React from 'react';
import Foo from "./Foo";

class Hoge extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

//componentDidMount
  componentDidMount() {
    //ボタンがクリックされたらGoodをカウントアップする
    document.getElementById('counter').addEventListener('click',this.countUp)
  }

//componentDidUpdate
  componentDidUpdate() {
    if (this.state.count >= 100) { //100になったら
      this.setState({count:0}) //0に戻る
    }
  }
//componentWillUnmount
  componentWillUnmount() {
    //無駄なリソースの解放によサーバー負荷が軽減される
    document.getElementById('counter').removeEventListener('click',this.countUp) //countUpのリスナーをremoveする
  }

  countUp = () => { //関数が呼び出されたら
    this.setState({count: this.state.count +1 }) //stateを変更します(現在のcountに+1します)
  }

  render() {
    return (
      <>
        <Article 
          title={"ライフサイクルメソッドの使い方"}
          count={this.state.count}
        />
      </>
    )
  }
}

export default Hoge

##importとexportモジュールの使用
Reactで使用するモジュールの概念をうまく使うために必須項目

###モジュール化
####モジュール・・・？
→大きなものをいくつかに分割して管理していく方法のこと
→基本１ファイル１モジュールとする
→任意の場所で読み込んで使用できる

####メリット
１．大規模アプリケーションになっても管理しやすい
２．任意の場所で読み込み、かつ最小限で済む為読み込み速度にも影響する
３．プログラムの使いまわし(再利用)が可能な為、何度も同じコードを書く必要が無い

１つのコンポーネントを作成したら、ひとつのモジュールになっているので必要なところで読み込む
また、コンポーネントをいくつかに分けることにより管理しやすくしている

###export
####名前付きexport
・１モジュールから複数の関数をexportできる
　※クラスはexportできない

FooBar.js

export function Foo() {
  return (<h1>Fooo</h1>)
}//通常関数
export const Bar = () => {
  return (<h1>Baar</h1>)
}//アロー関数

####名前無しexport(default)
※ES6推奨の書き方
・１ファイル(１モジュール)1export
・アロー関数は宣言後にexportする
・クラスをexportできる

Foo.js

export default function Foo() {
  return (<h1>Fooo</h1>)
}

Bar.js

const Bar = () => {
  return (<h1>Baar</h1>)
}
export default Bar

Hoge.js

export default class Hoge exteds Fuga {
  render() {
    return (<h1>Hoge</h1>)
  }
}

###モジュールのインポート
####方法は３種類
１．全体のインポート
２．一部(関数ごと)だけのインポート
３．別名でのインポート

####１．全体のインポート
・名前無し(default)exportしたモジュールをimportする
・モジュール全体をimport

Foo.js

import React from 'react'; //npmで管理しているｒeactというパッケージの中のReactというモジュールをimportしているよの意味
import Bar from "./Bar"; //BarというファイルからBarというモジュールをimportしているよという意味

Bar.js

const Bar = (props) => { //アロー関数でBarコンポーネントを宣言
  return (<div>Barです</div>)
};
export default Bar //コンポーネントのexport

####２．一部(関数ごと)だけのインポート
・名前付きexportされたモジュールのimport
・{}内にimportしたい関数名

Hoge.js

import { Foo, Bar } from "./FooBar"; //FooBarというファイルからFooとBarをimportするという書き方になる

FooBar.js

export function Foo() {
  return (<h1>Foooo</h1>)
}
export const Bar = () => {
  return (<h1>Baaar</h1>)
}
//１ファイルだけど２つのモジュールで構成される

####３．別名でのインポート
・別名(エイリアスとも言う)をつけてimportできる
→モジュール全体の場合：* as name
→モジュール一部の場合：A as B

HogeHoge.js

import React from 'react';
//↓モジュール全体の場合：* as name
import * as FooBar from './FooBar' //FooBarって名前で./conponents/FooBarに保管のモジュールをimportしますという書き方
//↓モジュール一部の場合：A as B
import { Foo as MyFoo } from './FooBar' //FooBarというファイルにあるFooという関数をMyFooという名前でimportするという書き方


  render() {
    return (
      <>
        <FooBar.Foo /> //FooBarの中のFoo関数
        <FooBar.Bar /> //FooBarの中のBar関数
        <Hoge />
      </>
    )
  }
}

export default HogeHoge

次回③はReactHooks state