Edited at

React Hooksを触ってみた - State Hooks


概要

Reactの新機能、React Hooksのうち、State Hooksの紹介


React Hooksとは?

React Hooksとは、React Ver 16.7 から導入される、クラスを書かずに state 管理を行える機能。

現在、Reactの 16.7.0-alpha.0 で機能を試すことができる。(10/28/18 現在)


React Hooksを使って見るには?

手っ取り早く機能を試すには、create-react-appで新規reactアプリを作成すること。

そのままだと現時点でのlatestである16.6.0が入っているので、@next版を入れる(10/29/18現在)

yarn add react@next react-dom@next


とりあえずExampleの実装

Reactの公式サイトに乗っているCounterの実装例を書いてみる

Code Sandboxはこちら


app.jsx

import React, { useState } from 'react'

import ReactDOM from 'react-dom'

const App = () => {
const [count, setCount] = useState(0)

return (
<div>
<p>You clicked {count} times </p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)



つまりどういうことだってばよ?

まずは最初の行を見てほしい

const [count, setCount] = useState(0)

ここでCounterの値を保持するstate名、countとそれと対になるSetter関数であるsetCountが宣言されている。

useState()に使われている引数は宣言したStateの初期値だ。

ボタンを押す度にsetCountが呼ばれてcountの値が更新される。

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


何が良くなったの?

今までのstateful componentと比べて格段にコードが短く済むようになったのと、

Classでは無いので、至るところでthisを書かなくても良くなり、とっつきやすくなった。

参考までに上記のコードを今までのReactの手法で書いたらこうなる。


app.jsx

import React, { Component } from "react";

import ReactDOM from "react-dom";

class App extends Component {
constructor() {
super();
this.state = { count: 0 };
}

setCount(val) {
this.setState({ count: val });
}

render() {
const { count } = this.state;
return (
<div>
<p>You clicked {count} times </p>
<button onClick={() => this.setCount(count + 1)}>Click me</button>
</div>
);
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);



他の機能は?

今回紹介したのはReact Hooksの基本であるState管理を行う為の機能、State Hooks

React Hooksには他に以下の機能がある

- Effect Hooks - クラスを宣言しなくてもStateの状態をListenしてState以外の操作が行える

- Custom Hooks - 他のComponentで流用できるHooks

これらについてはまた後日記述する。


参考

Hooks at a Glance - React

Introducing Hooks - React

Writing Custom Hooks - React