関数構成部品とクラス構成部品のステータス管理の注意点

8489 ワード
テキストリンク

▼▼▼関数素子vs系素子状態管理注意


基本的ですが、基本的なことを忘れてしまうことがあります.
反省しながら宣伝する
[함수형 컴포넌트 (hook: useState)]

import React, { useState } from 'react'

const [emailPw, setEmailPw] = useState({email: "", password: ""})
    const hadleInputValue = (key) => (text) => {
        setEmailPw({
            ...emailPw, // !!!
            [key]: text.target.value,
        });
    };
  ...생략...
  <div>
    <input
        type="email"
        onChange={hadleInputValue("email")}
    ></input>
  </div>
  <div>
    <input
        type="password"
        onChange={hadleInputValue("password")}
    ></input>
  </div>



[class형 컴포넌트 (setState)]
  ...생략...
  this.state = {
      email: "",
      password: ""
  }
  ...생략...

  hadleInputValue = (key) => (text) => {
      this.setState({
          [key]: text.target.value,
       });
  };
...생략...
  <div>
    <input
        type="email"
        onChange={hadleInputValue("email")}
    ></input>
  </div>
  <div>
    <input
        type="password"
        onChange={hadleInputValue("password")}
    ></input>
  </div>
クラス構成部品では、setStateは既存の値ではなくStateオブジェクトに保持されます.
関数型構成部品で、以前のコンダクタンス値の状態値を削除します.
既存のコードをタイプスクリプトに再パッケージすると、これらのトラップを長い間うろうろしていました.(サンプルコードはタイプスクリプトX)
これらの違いを考慮すると、関数要素の既存の状態値を消去することは避けられます.
Spread演算子(...stateなど)を使用して不変性を維持します.
松江画像Web scripping(スクロール)
JavaScriptクラスのクリーンアップ