項目
・ライフサイクルメソッド
・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が主要メソッド使用の例
import React from 'react';
import Bar from "./Bar";
const Article = (props) => {
return (
<div>
<h2>{props.title}</h2>
<LikeButton count={props.count}/>
</div>
)
};
import React from 'react';
const LikeButton = (props) => {
return(
<button id={"counter"}> 👍 {props.count}</button>
)
}
export default Bar
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できない
export function Foo() {
return (<h1>Fooo</h1>)
}//通常関数
export const Bar = () => {
return (<h1>Baar</h1>)
}//アロー関数
名前無しexport(default)
※ES6推奨の書き方
・１ファイル(１モジュール)1export
・アロー関数は宣言後にexportする
・クラスをexportできる
export default function Foo() {
return (<h1>Fooo</h1>)
}
const Bar = () => {
return (<h1>Baar</h1>)
}
export default Bar
export default class Hoge exteds Fuga {
render() {
return (<h1>Hoge</h1>)
}
}
モジュールのインポート
方法は３種類
１．全体のインポート
２．一部(関数ごと)だけのインポート
３．別名でのインポート
１．全体のインポート
・名前無し(default)exportしたモジュールをimportする
・モジュール全体をimport
import React from 'react'; //npmで管理しているｒeactというパッケージの中のReactというモジュールをimportしているよの意味
import Bar from "./Bar"; //BarというファイルからBarというモジュールをimportしているよという意味
const Bar = (props) => { //アロー関数でBarコンポーネントを宣言
return (<div>Barです</div>)
};
export default Bar //コンポーネントのexport
２．一部(関数ごと)だけのインポート
・名前付きexportされたモジュールのimport
・{}内にimportしたい関数名
import { Foo, Bar } from "./FooBar"; //FooBarというファイルからFooとBarをimportするという書き方になる
export function Foo() {
return (<h1>Foooo</h1>)
}
export const Bar = () => {
return (<h1>Baaar</h1>)
}
//１ファイルだけど２つのモジュールで構成される
３．別名でのインポート
・別名(エイリアスとも言う)をつけてimportできる
→モジュール全体の場合：* as name
→モジュール一部の場合：A as B
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