ReactNativeでHooksを使用してみる

はじめに

• ReactNativeでHooksを利用するにあたり覚えたことを下記にまとめました。

Hookが利用できるバージョン

• expoではReactHookがSDK33以降から対応している。
• ReactNativeは0.59から対応している

React 16.8.0 がフックをサポートする最初のバージョンです。アップグレードの際は、React DOM を含むすべてのパッケージの更新を忘れないようにしてください。React Native は React Native 0.59 リリース以降でフックをサポートします。

ja.reactjs.org

Hookの機能

• useEffectでマウント時だけ実行した場合、第二引数は[]を指定する

空の配列 [] を渡すと、この副作用がコンポーネント内のどの値にも依存していないということを React に伝えることになります。つまり副作用はマウント時に実行されアンマウント時にクリーンアップされますが、更新時には実行されないようになります。

• コンポーネントがアンマウントされるときにクリーンアップが必要な場合、returnでクリーンアップ関数を返します

  useEffect(() => {
    const timer = setTimeout(() =>{
      setArticles(dummyArticles)
    }, 2000)
    return () => clearTimeout(timer)
  },[])

ja.reactjs.org

app.jsonにapplication独自の設定を追加する

• 'expo-constants'をインストールする

expo install expo-constants

• 'app.json'のextraを追加する

{
  "expo": {
    "name": "test",
    "slug": "test",
    "platforms": ["ios", "android", "web"],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "extra": {
      "apiKey": "ssss451a7df0d51addsafafa43f08bff9afdfasdfasd8c2e8d26064"
    }
  }
}

• app.jsonを設定した場合、expoを再起動する docs.expo.io docs.expo.io

Function / Class Componentの違い

（１）Class Component - state - ライフサイクル(ComponentdDidMountなど)

export default class App extends React.Componet  {

  constructor(props) {
    super(props)
　// HooksでいうuseState
    this.state = {
      articles: []
    }
  }

  // HooksでいうuseEffectの部分
  async componentDimMount() {
    this.fetchArticles(URL);
  }

  fetchArticles = async () => {
    try {
       const response = await axios.get(URL)
       this.setState({ articles: response.data.articles })
    } catch (error) {
       console.error(error)
    }
  }

  render() {
  }

}

(2) Function Component - UseState - UseEffect - 記述が簡単に書ける - 動作としても少し早い

※上記のClass ComponentをFunction Componentで記述している

export default  App = () => {
  const [articles, setArticles] = useState([])

  useEffect(() => {
    fetchArticles()
  },[])

  const fetchArticles = async () => {
    try{
      const response = await axios.get(URL)
      setArticles(response.data.articles)
      console.log(response)
    } catch(error){
      console.log(error)
    }   
  }

  return (

  );
}