React.jsのuseState(), 及びステートフック

react-calendarというライブラリを導入したのですが、公式で紹介されているUsageが全く意味がわからなかったので読み解くと、React.jsのステートフックという機能を理解していないことがわかりました。
ここでは、備忘録として、ステートフックだけではなくそれを使用するために私が学んだ周辺知識と併せて書きます。
＜参考＞
　-ステートフックの公式：https://ja.reactjs.org/docs/hooks-state.html

#関数コンポーネントの存在を受け入れる
私は今まで、以下のようにクラスで定義（？）したコンポーネントのみを扱ってきました。

react.js

//クラスでコンポーネントを定義
class Example extends React.Component {
  // ...

  render() {
   //JSX
  }

しかし、ステートフックとは、クラスを使用しないでコンポーネントを定義する、「関数コンポーネント」にて使用されるものです。

react.js

//関数コンポーネント
const Example = (props) => {
  // ...

  return(
  //JSX
  );
}

#useState()を使ってState変数を宣言する

クラスで定義したコンポーネントでは、以下のようにstate変数を宣言することには馴染みがあります。

react.js

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0    //state変数の例
    };
  }

関数コンポーネントでは、以下のようにステートフックをつかってstate変数を宣言します。

react.js

function Example() {
  const [count, setCount] = useState(0);
  // const [state変数名, set変数名] = useState(state変数の初期値)

const [count, setCount] = 〇〇　という書き方は、
JSの「分割代入」という書き方とのこと。
-分割代入：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

この書き方により、変数countには初期値の「0」が、SetCountにはcountを更新する際の関数
が代入されているようです（認識あってますか？）

#stateの読み出しと更新
stateの読み出しと更新についても、クラスのコンポーネントと関数コンポーネントを比較します。
「Click me」というボタンをクリックすると、「You clicked {回数} times」という文字列が表示されるJSXを返すことを例にします。

クラスで定義したコンポーネントでは、以下のようにthis.state.変数名で読み出し、
this.setState({変数名: ...})で更新します。

react.js

//読み出し   
  <p>You clicked {this.state.count} times</p>

//更新
  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

関数コンポーネントでは、thisは不要です。最初に定義した変数名countと、setCountを使って、よりシンプルに記載できます。

react.js

//読み出し   
  <p>You clicked {count} times</p>

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