useState Hook

14277 ワード
リカバリ テキストリンク

Hookは


応答16.8の後に導入された機能要素は、状態管理も可能である.
Hookはクラスで操作されません.逆にclassなしでreactを使用できます.

useState Hook

  • usStateメソッド
    • 戻り値
  • :状態変数、更新可能変数の関数(Setter関数)
    • setCountを呼び出して
  • count変数の値
    • をリフレッシュする
  • 級のthis.setStateと非常に似ていますが、古い状態と新しい状態をマージしない
    • という違いがあります.
  • this.stateとは異なり、setState Hookのstateはオブジェクト
    • である必要はありません.
    古典的な行為の問題
  • this bindingは、イベントハンドラとして混乱をもたらします.
  • 理解が困難で複雑な素子
    • .
  • 論理回収に役立つHOC、render props問題
    • Hookの登場はこの問題を解決するためで、その目的はあなたの必要なものだけを使うことです.
    Tip!! useState関数としての初期値
    初期値の割り当て時に計算量が大きい場合は、関数を使用します.また、初期状態を関数として使用するため、レンダリング時に再実行されません.
    useStateコード
    import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0); //state 변수 선언

  return (
    <div>
      <p>You clicked {count} times</p>  //<!-- state 가져오기 -->
      <button onClick={() => setCount(count + 1)}> //state 갱신하기
        Click me
      </button>
    </div>
  );

------------
//클래스 컴포넌트에서 onClick을 익명함수로 바로 사용가능
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

    関数更新
    既存の値を更新する方法の関数を登録します.
    const [count, setCount]=useState(0);
setCount(prev => prev + 1);
    useStateを使用して複数の入力を管理する
    複数の入力を使用してステータスを管理する場合は、複数のusStateを使用して管理できますが、次のオプションを使用して複数のステータスを1つのステータスに管理します.
    import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  
 const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

 const onChange = (e) => {
 	const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

 const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}
    onChangeのsetInputsからはspreadを用いて不変性を維持した.これは,反応規則の1つであるstateを更新する際に不変性を保つためである.
    UClassとReflection
    フラッシュ学習ノート