0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Reactを使ってWebサービスを作るための基礎3

Last updated at Posted at 2020-04-29

Reactの基礎を学ぶためのメモ.
Reactコンポーネントを作るためにコンポーネントのライフサイクルについて理解する.

#Reactコンポーネントの作り方 その2

##Reactコンポーネントのライフサイクル
Reactコンポーネントには,Mounting(準備期間),Updating(表示期間),Unmounting(破棄期間)の3つのライフサイクルが存在する.

各ライフサイクルでは,呼び出されるメソッドの流れが決まっている.

###Mounting
UIにコンポーネントが描画されるまでの準備期間.最初の一回のみ実行.

  1. constructor()
  2. render()
  3. componentDidMount()

###Updating
UIにコンポーネントが表示されていて,基本的にユーザが操作できる期間.propsやstateの更新の度に実行.

  1. render()
  2. componentDidUpdate()

###Unmounting
他のコンポーネントに切り替える前に現在のコンポーネントを破棄するための期間.終わりの一回のみ実行.

  1. componentWillUnmount()

##処理の流れを決めるライフサイクルメソッド
各ライフサイクルメソッドについて,詳しく見ていく.
ちなみに,必須のrender()以外はオプショナルのため,書くことがなければ省略が可能.

###constructor()
stateの初期化やactionのバインドのために用いられる.

###componentDidMount()
1度目のrenderメソッドが呼ばれた後に1度だけ呼ばれるメソッド.
この時点ではまだUIに表示はされておらず,データをフェッチしたり,アニメーションやタイマーをセットする場合はここで行う.

###render()
コンポーネントの根幹となる日数のメソッド.
ここに書いてあるコードが実際にUIに現れるものである.
renderはpropsやstateの更新の度に呼ばれるため,ここで直接propsやstateを操作してはいけない.
また,新しい関数の定義も避けるべき.
propsやstateの値が変わっても,結果は冪等であるべき

###componentDidUpdate()
第一引数に1つ前のprops,第二引数に1つ前のstateが渡される.
パフォーマンスを低下させるpropsやstateの更新は避けるべき.

###componentWillUnmount()
現在のコンポーネントを破棄する直前に呼ばれるメソッド.
もうrenderは呼ばれることはないので,ここでpropsやstateの更新をしても意味がない.

##Stateless Functional Componentについて
Reactライブラリをimportするだけで自動的にReactコンポーネントとして扱われる.
このとき,renderメソッドのみのコンポーネントとなる.

コンポーネントがstateを保持しない場合には,Stateless Functional Componentにすることで負荷を減らすことができる.

import react from 'react'

const NumberPlate = (props) => {
  return <span style={{ color: '#eeeeee' }}>{props.children}</span>
}

これは下記に示すコードと処理自体は同じ.

export default class NumberPlate extends React.Component {
  render (props)  {
    return <span style={{ color: '#eeeeee' }}>{props.children}</span>
  }
}
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?