React の setState/useState を理解する

このブログでは、「クラスおよび関数コンポーネントで setState/useState を使用するにはどうすればよいですか?」という質問に答えます.この質問に答える前に、React における State とは何かについて少し説明します.

州とは

props と同様に、React の状態はデータを保存し、コンポーネントのレンダリングや動作に影響を与えるオブジェクトです.違いは、小道具とは異なり、状態はコンポーネント内で管理され、時間の経過とともに変更できることです.

コンポーネントの状態にアクセスするには?

コンポーネントの状態は、他のオブジェクトと同じようにアクセスできます.this.state.property_name

注: クラス コンポーネントでは、コンストラクターで初期状態を割り当てます.

例:

class Sports extends React.Component {
  constructor(props) {
    super(props)

  this.state = {
    sports: ['basketball', 'football', 'soccer'],
    count: 0
  }

  render() {
    return (
      <div className = "container">
        <p> I have played {this.state.count} sport(s) </p>
      </div>
    );
   }
  }
}

クラス VS 関数コンポーネントを使用してコンポーネントの状態を更新する方法は?

クラス コンポーネント

React には 2 種類のコンポーネントがあります.クラスコンポーネントと機能コンポーネントがあります.クラス コンポーネントは、constructor() メソッドを呼び出し、初期状態を設定します.次に、setState を呼び出して状態をさらに下に変更できます.

最終的にコンポーネントの既存の状態にマージされるオブジェクトを受け入れるため、 setState() メソッドを使用できます.このメソッドは、コンポーネントの状態オブジェクトへの変更をスケジュールし、コンポーネントとその子が更新された状態で再レンダリングする必要があることを React に伝えます.

//Instead of doing this
this.state.name = 'Michael Jordan';

//Do this
this.setState({name: 'Michael Jordan'});


機能部品

機能コンポーネントでは、React Hooks を使用できます.フックは、React 機能に「フック」できる特別な関数です.以前は、状態を追加する必要がある場合、関数をクラスに変換する必要がありました.これで、関数コンポーネント内でフックを使用できます.

クラスコンポーネントとは異なり、関数コンポーネントには「this」がないため、 this.state を割り当てたり読み取ったりすることはできません.代わりに、コンポーネント内で useState フックを直接呼び出します. useState フックは、関数コンポーネントに React 状態を追加できるフックです.
useState() は、this.state がクラスで提供するのとまったく同じ機能を使用する新しい方法です. useState() フックの唯一の引数は初期状態です.

例

import React, {useState} from 'react';

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

結論

これで setState()/useState() の概要を終わります.覚えておくべきこと:

状態を直接変更しないでください.直接変更すると正しくない動作が発生し、再レンダリングされない

変数を変更するたびに setState を呼び出す必要はありません.変数の変更を画面の UI に反映させたい場合にのみ setState を呼び出します.

React から useState フックをインポートします.関数コンポーネントでローカル状態を保持できます.