[解決済み】ReactのuseState()って何？

質問

現在、Reactのフックの概念を学んでおり、以下の例を理解しようとしています。

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

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

上記の例では、ハンドラ関数のパラメータ自体にカウンターをインクリメントしています。もし、イベントハンドラ関数の内部でカウント値を変更したい場合は、どうすればよいでしょうか？

次のような例を考えてみましょう。

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

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

解決方法は？

Reactフック のような react のコア機能にアクセスするための新しい方法です (まだ開発中です)。 state クラスを使わずにカウンタを増やしたい場合、この例では onClick propを使えば、次のようなことができます。

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

とonClickの2種類があります。

<button onClick={setCount}>
    Click me
</button>

この行で何が起こっているのか、さっそく説明しましょう。

const [count, setCounter] = useState(0);

useState(0) はタプルを返し、最初のパラメータ count はカウンタの現在の状態であり setCounter は、カウンターの状態を更新できるようにするメソッドです。私たちは setCounter メソッドで状態を更新し count の内部で使用しています。 setCount フックのアイデアは、より機能的なコードを維持すること、そして クラスベースのコンポーネント 必要でない場合は

フックについては、複数の例を含む完全な記事を書きました。 (など（カウンターを含む）。 このコードペン を利用した。 useState , useEffect , useContext および カスタムフック . この回答でフックがどのように機能するかについてもっと詳しく説明することもできますが、ドキュメントでは ステートフック やその他のフックについて詳しく説明しています。

を更新しました。 フックはもはや提案ではない バージョン 16.8 について、Reactのサイトで回答しているセクションがあり、使用できるようになりました。 よくある質問 .