Reaction Hook、公式ドキュメントを読みなさい!

useState

Hookは特殊な関数です.
Hookは関数要素でstateを使用するのに役立ちます.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

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

userStateは、パラメータとして初期状態値を受信します.カウンタは0から始まるので、上記の例では0を初期値としています.this.stateと異なりsetState Hookのstateはオブジェクトである必要はありません.もちろん、あなたが望むなら、そうすることもできます.この初期値は、最初のレンダリングでのみ使用されます.

だからこれは可能です。

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState([22]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count.concat([2]))}>Click me</button>
    </div>
  );
}

△押すたびに2が追加されますが…なぜ数字だけが出力されるのでしょうか…?

1つの構成部品に複数のState Hookを提供

(2つの異なる変数を保存する場合は、userState()を2回呼び出す必要があります.)

function Example() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(29);
  const [fruit, setFruit] = useState("banana");
  const [todos, setTodos] = useState([{ text: "Learn Hooks" }]);

  return (
    <div>
      <div>
        <p>You are {age} years old</p>
        <button onClick={() => setAge(age + 1)}>1년 후</button>
      </div>
      <div>
        <p>My favorite fruit is a(n) {fruit} </p>
        <button onClick={() => setFruit("apple")}>i've changed my mind</button>
      </div>
      <div>
        <p>I got {todos.length} things to do</p>
        <button onClick={() => setTodos(todos.concat([1]))}>
          getting tired
        </button>
      </div>
    </div>
  );
}

Effect Hook

Effect Hook(すなわちUSEffect)は、これらの副作用を関数要素で実行することを可能にする.その目的はReactクラスのコンポーネントDidMountまたはコンポーネントDidUpdateおよびコンポーネントWillUnmountと同じですが、APIに統合されています.
既定では、[やり直し](Redo)はレンダリング後に効果を実行します.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

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

(ドキュメントのタイトルを変更するには、ボタンをクリックしてください...)

2つのレスポンスコンポーネント

クリーンアップされていないEffects

クリーンアップ(Clean-up)を使用したEffects

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

(効果からクリアする必要がある場合は関数を返します)

Hookのルールを使う

の最上位レベルからのみHookを呼び出すことができます.

応答関数要素内でのみHookが呼び出されます.