りあクト！第2版の学習メモ

Reactのキャッチアップのため、りあクト！第2版を学習中
そのための学習メモ

第8章 Hooksで関数コンポーネントを強化

以前の関数コンポ

• Local Stateを持てない
• ライフサイクルメソッドもない
• HOCを使って上記を持つRecomposeライブラリが意識高い系で流行

Hooksの誕生

• Recomposeの作者Andrew ClarkがFBにスカウトされ、Hooksを開発(Recomposeの役目は終わる)
• 2018/10のReactConf 2018で発表
• 関数コンポーネントにLocal StateやライフサイクルといったReactの機能を『接続する(hook into)』からHooksと名付けられた

Hooksの革新性

• HOCやRender Propsの弱点である、インデント地獄、可読性の悪さを抹消
• stateなどの付与したい機能のみを切り出せるため、再利用、テストがしやすい

State Hookの実装例

  import React, { FC, useState } from 'react';
  import { Button, Card, Statistic } from 'semantic-ui-react';

  import './App.css';

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

    const increment = () => {
      setCount(count + 1);
    }

    const decrement = () => {
      setCount(count - 1);
    }

    return (
      <div className="container">
        <header>
          <h1>カウンター</h1>
        </header>
        <Card>
          <Statistic className="number-board">
            <Statistic.Label>count</Statistic.Label>
            <Statistic.Value>{count}</Statistic.Value>
          </Statistic>
          <Card.Content>
            <div className="ui two buttons">
              <Button color="red" onClick={decrement}>
                -1 
              </Button>
              <Button color="green" onClick={increment}>
                +1
              </Button>
            </div>
          </Card.Content>
        </Card>
      </div>
    )
  }

Effect Hookでライフサイクルを扱う

• 副作用を扱うHooks
• クラスコンポのライフサイクルメソッド(componentDidMount()など)の機能を実現
• 副作用とは、データの取得、DOM改変、ログ出力など

あとは読んでない。下記の方が分かりやすかった。
ja.reactjs.org