1. seira

    No comment

    seira
Changes in title
-React hookを基礎から理解する (useState編)
+React hooksを基礎から理解する (useState編)
Changes in body
Source | HTML | Preview
@@ -1,151 +1,151 @@
-#React hookとは
+#React hooksとは
React 16.8 で追加された新機能です。
クラスを書かなくても、 `state`などのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。
-React hookのうち、実際によく使用される3つに絞って紹介します。
+React hooksのうち、実際によく使用される3つに絞って紹介します。
-- React hookを基礎から理解する (useState編) :point_left_tone2: 今ここ
-- React hookを基礎から理解する (useEffect編)
-- React hookを基礎から理解する (useContext編)
+- React hooksを基礎から理解する (useState編) :point_left_tone2: 今ここ
+- React hooksを基礎から理解する (useEffect編)
+- React hooksを基礎から理解する (useContext編)
##クラスコンポーネントと関数コンポーネント
クラスコンポーネントと関数コンポーネントの違いを確認してみます。
###クラスコンポーネント
```react
import React from 'react'
const intialState = Math.floor(Math.random() * 10) + 1
/* countの初期値として、1~10までのランダムな数値を生成 */
class Counter extends React.Component {
constructor(props) {
super(props)
this.state = {
count: intialState,
/*クラスでは、コンストラクタ内で、this.stateの初期値{ count: intialState }をセット*/
open: true
/*this.stateの初期値{ open: false }をセット*/
}
}
toggle = () => {
this.setState({ open: !this.state.open })
}
/* toggleメソッドを作成 */
render() {
return (
<>
<button onClick={this.toggle}>
{this.state.open ? 'close' : 'open'}
</button>
<div className={this.state.open ? 'isOpen' : 'isClose'}>
<p>現在の数字は {this.state.count} です</p>
<button
onClick={() => this.setState({ count: this.state.count + 1 })}
>
+ 1
</button>
<button
onClick={() => this.setState({ count: this.state.count - 1 })}
>
- 1
</button>
<button onClick={() => this.setState({ count: 0 })}>0</button>
<button onClick={() => this.setState({ count: intialState })}>
最初の数値に戻す
</button>
{/*ボタンをクリックした時に、this.setState()を呼ぶことでcountステートを更新 */}
</div>
</>
)
}
}
export default Counter
```
###関数コンポーネント
-hook の `useState` を使ってクラスコンポーネントから関数コンポーネントに書き換えてみます。
+hooks の `useState` を使ってクラスコンポーネントから関数コンポーネントに書き換えてみます。
関数コンポーネントの基本形は以下の通り。
```react
const ExComponent = props => {
- // ここでhookを使える
+ // ここでhooksを使える
return <div />
}
```
####useStateの基本形
`useState` によって React の `state` の機能を関数コンポーネントに追加します。
```react
const [state, setState] = useState(intialState)
```
左辺の state 変数には任意の名前を付けることが出来ます。
(分割代入構文をイメージすると理解しやすいです。)
- 1つ目の要素: `state` の現在値
- 2つ目の要素: それを更新するための関数
- `state` が更新されても `intialState` は`intialState` として保持される
```react
import React, { useState } from 'react'
/* 関数コンポーネント内で state を使えるようにするため、useState を インポート */
const Counter = () => {
const intialState = Math.floor(Math.random() * 10) + 1
/* countの初期値として、1~10までのランダムな数値を生成 */
const [state, setState] = useState(intialState)
/* state という名前の state 変数を宣言、初期値intialStateをセット */
const [open, setOpen] = useState(true)
/* open という名前の state 変数を宣言、初期値trueをセット */
const toggle = () => setOpen(!open)
/* toggleの関数を宣言 */
return (
<>
<button onClick={toggle}>{open ? 'close' : 'open'}</button>
<div className={open ? 'isOpen' : 'isClose'}>
<p>現在の数字は{state}です</p>
<button onClick={() => setState(prevState => prevState + 1)}>
{/* setState()は、stateを更新するための関数。stateを引数で受け取ることも出来る */}
+ 1
</button>
<button onClick={() => setState(state - 1)}>- 1</button>
<button onClick={() => setState(0)}>0</button>
<button onClick={() => setState(intialState)}>最初の数値に戻す</button>
</div>
</>
)
}
export default Counter
```
クラスで書いた場合と、同じ結果になりました:heart_eyes:
再レンダリング後も React はその変数の現在の `state` の値をそのまま持っており 、最新の `state` の値を関数に渡します。現在の `state` の値を更新したい場合は、`setState` を呼びます。
##最後に
次回は `useEffect` について書きたいと思います。
###参考にさせていただいたサイト
https://reactjs.org/