ステータスとは?

10268 ワード
State React テキストリンク
この投稿では、構成部品のステータスを更新するユーザーのステータスについて説明します.
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レベルを使用できます.
    [JS] Higher-Order Functions, The call and apply bind Methods
    reload()を使ってもloggingのloggerオブジェクトにHanlderを多重登録させない