ステータスとは?


この投稿では、構成部品のステータスを更新するユーザーのステータスについて説明します.
propsの場合、親コンポーネントでのみステータスを設定し、サブコンポーネントでreadonly(読み取り専用ステータス)を使用するのが欠点です.
この問題を解決するのが国だ.

ステータスのタイプ

  • 系素子の状態
    state:オブジェクト型
  • 関数型素子のユーザ状態
    sate:
  • データ型安心
    今期の投稿では、関数コンポーネントでusState hookを使用する方法について説明します.

    userStateによる非配列割り当て

    const [text, setText] = useState('');
    이러한 식으로 비구조 할당을 통한 useState를 선언하여서 사용 할 수 있다.
  • 関数のパラメータ:初期値
  • 戻り値(再試行)
  • 現在のステータス
  • の状態を変更するための関数->シンナー関数
  • useStateの使用


    1つのコンポーネントでuseStateを複数回使用することもできます.
    import React, { useState } from 'react';
    
    const Say = () => {
      const [text, setText] = useState('');
      // 첫번 째 사용 : 아래에서 바로 새터함수 정의 하여 함수로 생성
      const onClickEnter = () => setText('안녕');
      const onClickLeave = () => setText('잘가');
    
      const [color, setColor] = useState('black');
      // 두번 째 사용 : 새터함수를 return부에 바로 사용
    
      return (
        <div>
          <button onClick={onClickEnter}>입장</button>
          <button onClick={onClickLeave}>퇴장</button>
          <h1 style={{ color }}>{text}</h1>
          <button style={{ color: 'red' }} onClick={() => setColor('red')}>
            // onClick 이벤트에 대한 새터함수를 바로 정의하여 사용
            빨간색
          </button>
          <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
            파란색
          </button>
          <button style={{ color: 'green' }} onClick={() => setColor('green')}>
            초록색
          </button>
        </div>
      );
    };
    
    export default Say;
    

    オブジェクトまたは配列の不変性を維持するために使用


    オブジェクトまたは配列で使用する場合は、不変性を維持します.
    userStateは、setter関数で更新する必要があります.
    拡張演算子...Obj
    配列内蔵関数concat、filter、mapレベルを使用できます.