[TIL]react学習のテクニック

4853 ワード

1つの方法は、1つの要素に1回宣言し、必要なBodenStateをusStateに入れることです.

条件付きレンダリング
3つの演算子に比べて,迅速な評価論理計算法を用いることがより簡潔である.{isSpecial && <b>*</b>}

props値を省略すると{true}が得られます.<Hello name="react" isSpecial >この場合、isSpecial={true}と同じです.

ステータスの前の値の使用(関数の変更)
単一変数(useState(3))を使用する場合、前の値を次のように書き込むことができます.

const [number, setNumber] = useState(0);
const onIncreate = () -> {
  setNumber(prevNumber => prevNumber + 1)
}

では、もしusStateがオブジェクトだったら?

const [number, setNumber] = useState({value:0});
const onIncreate = () -> {
  setNumber(prev => ({
    ...prev,
    value: prev.value + 1
  }))
}

ユーザ状態({})で使用されるオブジェクトは、直接非構造化割当てとして取り出すことができる.

const [myobj, setMyobj] = useState({ key1: 0, key2: 0 });
const {key1, key2} = myobj;
// 이후 myobj.key1 이 아닌 그냥 key1으로 사용할 수 있다

userefの使い方
userefには2つの方法があるようです.

userefを使用してDOMに直接参加
まずuserefを宣言し、Domでref={}属性を使用して割り当て、DOM APIを直接使用します.
getElementByIdで代用できます.Domを選択できます.
また、1つのrefで複数のdomを使用することもできます.(アレイを使用)

userefを使用して変数を処理
構成部品の変数を宣言/使用できます.
これは、再読み込みも初期化されない変数であり、再読み込みも開始されません.
再読み込みは発生しませんが、保存されている値です.
一般に,ユーザが見た画面に影響を及ぼさずに何らかの作業を行う必要がある場合に用いる.
クラス

特定状態演算に必要な変数がある場合.

ユーザーが表示する画面は変わりません.ダウンロード画像などの後続の作業をしてから、再ロード時に一緒に出力したい場合は、

です.
レコード

特定ボタン

を何回クリックしたか

setIntervalなどでモニタリングを行う場合は、特定の回数だけモニタリングして停止機能を実行します.(停止機能自体はEffectも使用可能)

この問題について([TIL]react学習のテクニック), 我々は、より多くの情報をここで見つけました https://velog.io/@hamster/TIL-React-재학습하며-배운-기법들

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol