未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

React ライフサイクメソッド

React ライフサイクメソッドについて

Reactで、元データは、propsであったり、APIで取得してきて、setStateをするケースが多多あると思います。

初期データは、ライフサイクルメソッドで設定する場合が多いと思います。

呼び出すタイミングによっては、データがstateに正しくセットされずに表示されないなどが結構あるので、 よく使いそうなメソッドを動かして理解する為にまとめました。

ライフサイクルメソッドとは?

Reactのrenderされるまでの手順だと思っている

ちゃんと言葉を理解したい人は他の人の記事で

qiita.com

よく使いそうなライフサイクルメソッド

  • componentWillMount

renderメソッドが呼ばれる前に実行される

   componentWillMount() {
   }
  • componentDidMount

renderメソッドが呼ばれた後に実行される

   componentDidMount() {
   }
  • componentDidUpdate

stateが更新された後に実行される

   componentDidUpdate() {
   }

検証

サンプルソース

class App extends Component {
   constructor(props){
     super(props)
     this.state = {
       lists: [1,2,3,4,5]
     }
   }

   componentWillMount() {
     console.log("call componentWillMount")
   }

   componentDidMount() {
     console.log("call componentDidMount")
   }

   componentDidUpdate() {
    console.log("call componentDidUpdate()")
   }
  

  render () {
    console.log("call render()")
  return (<div>{this.state.lists.map((li) => <li  key={li}>{li}</li>)}</div>)
  }
}

export default App;

このソースの場合、 componentWillMount() => render() => componentDidMount()の順番

f:id:everydayProguramming:20201006173546p:plain

stateを更新してみる


class App extends Component {
   constructor(props){
     super(props)
     this.state = {
       lists: [1,2,3,4,5]
     }
   }

   componentWillMount() {
     console.log("call componentWillMount")
   }

   componentDidMount() {
     console.log("call componentDidMount")

     const newList = Object.assign([], this.state.lists)     
     newList.splice(2,1)
     this.setState({lists: newList })
   }

   componentDidUpdate() {
    console.log("call componentDidUpdate()")
   }
  

  render () {
    console.log("call render()")
  return (<div>{this.state.lists.map((li) => <li  key={li}>{li}</li>)}</div>)
  }
}

export default App;

componentDidUpdate()が呼ばれました。 componentDidUpdate()前のrender()が2回呼ばれている理由がわかりませんが、 なんとなくライフサイクルメソッドが体感で分かった気がする。

f:id:everydayProguramming:20201006173730p:plain

APIなどで、componentWillMount とcomponentDidlMountどちらに初期データを呼べばいいの?

とりあえず動作の検証

  • componentWillMountにデータをセットする
class App extends Component {
   constructor(props){
     super(props)
     this.state = {
       lists: []
     }
   }

   componentWillMount() {
    this.setState({lists: [1,2,3,4,5] })
   }

   componentDidMount() {
   }

f:id:everydayProguramming:20201006174513p:plain

  • componentDidMountにデータをセットする
class App extends Component {
   constructor(props){
     super(props)
     this.state = {
       lists: []
     }
   }

   componentWillMount() {
   }

   componentDidMount() {
    this.setState({lists: [1,2,3,4,5] })
   }

f:id:everydayProguramming:20201006174432p:plain

んん。。どっちが良いのだろうか