React Hooks に触れてみた。
業務でReactを使う機会があり、
またその機能の一つで今年正式版となったフックについて学んだので、
その備忘録。
React Hooksって何か?
React 16.8から導入された機能。
state
などのReactの機能を、クラスを書くことなく使えるようになる。
詳しくは、公式ドキュメントを参照。
フック使用有無の違い
単純なカウントアップアプリを例にすると、
例えば従来なら
export class Sample extends React.Component { constructor(props) { super(props) this.state = { count: 0 } } render() { const {count} = this.state return ( <div> <b>number: {count}</b> <button onClick={() => this.setState({count: count + 1})}> </div> ) } }
というような書き方をしていた箇所が、
export const Sample = () => { const [count, setCount] = useState(0) return ( <div> <b>number: {count}</b> <button onClick={() => setCount(count + 1)}> </div> ) }
このように書けるようになる。
ちなみにこちらはフックの機能の一つであるuseState
を使った例。
従来constructorの中で定義していたstateを、
フックでは変数とsetterを合わせて定義。右辺の引数に入っているのは初期値。
定義されたsetterがコールされることで、従来のsetStateと同じくレンダリングが行われる。
他にも、useEffect
、useContext
がある。
何が利点なの?
触ってみて感じたこと。
- stateの項目1つ1つに対してsetterが用意され、直感的に使用できる。従来の
setState
のように余計なオブジェクトの生成をする必要がない。 - 従来はstateを管理するコンポーネントはクラスであったが、フックの登場により、クラスを全く使わないでコードが書けるようになる。
- クラスを使わなくなることで、コードがメソッド単位で完結するので、よりシンプルになる。
まだまだ勉強中なので、
学んだことをどんどん貯めていきたい。