Reactにおける状態のリアクティビティ

では、リアクティビティがどのように機能するかを見てみましょう。 リアクティビティにより、状態が変更されると変更が即座に画面に反映されます。

例を見てみましょう。 製品名を持つ状態があるとします：

jsxconst [name, setName] = useState('prod');

マークアップに製品名を表示しましょう：

jsxreturn <div>
  <span>{name}</span>
</div>;

次に、クリックすると状態が変化するボタンを作成しましょう：

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

クリックハンドラーでは、関数setNameを使用して製品に新しい名前を設定します：

jsxfunction clickHandler() {
  setName('xxxx');
}

すべてのコードをまとめます。すると、ボタンをクリックした後、テキストは即座に新しい値に変わります：

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

個別のハンドラー関数を使用する必要はありません。匿名のアロー関数を使用できます：

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}