react hooksを使ってみる

今更ではあるがReactConf2018で発表されたHooksを軽く試す。

React Hooks

https://reactjs.org/docs/hooks-intro.html
https://qiita.com/Naturalclar/items/706d10e4d3a442f4e513
https://qiita.com/YutamaKotaro/items/ef0430f570779dcf8a26
https://qiita.com/__sakito__/items/417688ea125e395b353d
https://qiita.com/terrierscript/items/1516e946dfe91397c229

よくあるヘッダーのUIで、トップにあるときは透明背景で、スクロールすると背景ありになる
https://www.orosapparel.com/collections/mens-jackets/products/mens-orion-parka
にあるようなヘッダーUIをuseStateとuseEffectで実装してみる。

Header.js

import React, { useState, useEffect } from 'react'
import { HeaderStyle } from './style'

function Header() {
  // useState(初期値)
  // useState（）は[state, setState]の配列を返してくれるので、それぞれに好きな名前を与える。
  const [onTop, setOnTop] = useState(true)

  // scroll時に上部からのオフセットによってstateを更新する
  function onScroll() {
    const offset =
      window.pageYOffset ||
      (document.documentElement && document.documentElement.scrollTop) ||
      document.body.scrollTop

    if (offset >= 20 && !onTop) return false
    if (offset >= 20 && onTop) {
      setOnTop(false)
      return false
    }
    setOnTop(true)
  }

  // 今までならcomponentXXXmount系のライフサイクルでやってたeventListenerの登録などをuseEffectでやる
  useEffect(() => {
    document.addEventListener('scroll', onScroll)
    return () => document.removeEventListener('scroll', onScroll)
  })

  return (
    <div className={HeaderStyle(onTop)}>
        I am Header.
    </div>
  )
})

export default Header

style.js

import { css } from 'emotion'

export const HeaderStyle = (onTop) => css`
  background: ${onTop ? 'transparent' : '#fff'};
`