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

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


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

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

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

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

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

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

###主要なメソッドと時間軸ごとの動き方
| Mounting→  | Updating→  | Unmounting→  |
|:----------:|:----------:|:------------:|
| constructor()<br>初期化(state) |    ↓    |       ↓      |
|      ↓     |      ↓     |       ↓      |
|  render()<br>VDOMを描画<br>(JSXをリターン)  |  render()<br>VDOMを描画  |       ↓      |
|      ↓     |      ↓     |       ↓      |
| conponentDidMount()<br>render()の後に１度だけ呼ばれる<br>リスナーの設定やAPI通信に使用 | ↓ |       ↓      |
|      -     | conponentDidUpdate()再レンダー後に呼ばれるイベント |  ↓ |
|   -   |   -   | componentWillUnmount()破棄される直前に呼ばれるもの<br>リソース解放、リスナー解除他… |

###実装例 👍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