BETA

React Hooksについて勉強してみた

投稿日:2019-08-16
最終更新:2019-08-16

React Hooksとは

Reactの新し目の機能。(公式doc)https://ja.reactjs.org/docs/hooks-intro.html
v18.6以降のReactで試せる。
Reactにはクラスコンポーネントと 関数コンポーネントの二種類の書き方があり,
クラスの方は、自分の状態(例ではvalue)をもったり

import React from "react"  

class Sample extends React.Component {  
   constructor(props) {  
      super(props)  
      this.state = {  
        value: "Sample"  
      }  
   }  
   render() {  
     return (  
        <>  
          <h1>{this.state.value}</h1>  
        </>  
     )  
  }  
}  

componentDidMountやcomponentWillUnmountなど、コンポーネントがマウントされたら、逆にマウントが外れたらなどcomponentの状態の変化に応じて、実行するメソッドを切り替えたりできる。

  // マウントされた後にAPI通信をする  
  componentDidMount = () => {  
    fetch("https://samplenoapi.com/").then(  
      // 何らかの処理  
    )  
  }  

単純に要素を返すだけなら関数コンポーネントで十分だが、開発が進む中でstateの管理が必要になったらこのクラスコンポーネントに書き換える必要があった(面倒)。

React Hooksの登場により、関数コンポーネントであってもローカルなstateを持たせたりライフサイクルメソッドを使った時のように、任意のタイミングで必要な処理を行わせることが可能になった。

また、クラスコンポーネントに比べると書き方が単純。
例えば、countと言う初期値が0のstateを関数コンポーネント内で管理したいときは

import React, { useState } from "react"  

const Example = () => {  
  const [count, setCount] = useState(0)  
  return (  
    <h1>{count}</h1>  
  )  
}  

で済む。
クラスコンポーネントだったらconstructor内で初期化して、参照するときはthis.state.count。更新したいときはthis.state に直接代入するのではなくthis.setStateを使って更新する必要があったが
React Hooksの場合は,

 <button onClick={() => {setCount(count + 1)}}/>  

で済む。このsetCountはローカルなstateのcount専用のthis.setStateのようなもので、変更内容はこの関数の引数で与える。

 // countの値を置き換えたいときは  
  <button onClick={() => {setCount(20)}}/>  
// 以前の癖で下のようにやりがちだが誤り  
 <button onClick={() => {setCount(count = 20)}}/>  

ライフサイクルメソッドも簡単に

ローカルstateの管理だけでなくライフサイクルメソッドもだいぶわかりやすくなっている
クラスコンポーネント
だとマウントが終わったらcomponentDidMountで、stateが変化したらcomponentDidUpdateのように細かく使い分けが必要。(またcomponentWillMountなど非推奨になったメソッドなどがあって、ごちゃごちゃしている)
React HooksではuseEffectを使うことでライフサイクルメソッドを再現できる。
useEffectはcomponentDidMount・componentDidUpdate・componentWillUnmountをまとめたものと言う説明もあるけれどそれよりも、renderの後に副作用のように発生させると言う理解の方がしっくり来る気がする。

useEffect(() => {  
  console.log('hello')  
})  

useEffectはまだ理解できていないところもあるので、後で追加の記事を出してくつもり。

余談

React HooksだったかRedux Hooksだったか、どっちかReduxを駆逐するとか記事をみたことあったけどどうなんだろう。
ちょうどReduxを勉強していた時期だったから「あーあーきーこえなーい」でスルーしてたからどっちかわからない。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@moeka802の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!