React state, props


1. state


javascriptでは、データが変数に含まれます.
reactはstateにデータを書き込みます.
では、なぜreactはjavascriptの(let aaa=「000」)のようにstateではなく変数にデータを含まないのでしょうか.
Reactは、素子をフロントエンド(画面表示部)とバックエンド(データ管理部)に分けることができる.
JavaScriptのletまたはconst変数を使用して次の写真の魅力を高めると言っているだけです.
画面の後ろのデータのみが変更され、前の画面には反映されません.

ただし、画面で構成部品変数stateを使用してsetState()を使用して「好き」を変更すると、
setState()では、画面の再描画コマンドを実行し、変更したデータを画面に再描画します.

state


構成部品のマウント後、stateがデフォルト値から開始し、初期設定のデフォルト値が変化すると
スナップショット
snapshotは、一定期間、データ記憶装置を個別に記録した状態である.
構成部品は、独自の内部状態のみを管理できます.

setState()は、構成部品のstateオブジェクトを更新します。


setState()は、state内のオブジェクトを更新する関数です.
ここでは、ステータスオブジェクトにsnapshotで記録されたデータのうち変化した部分のみがレンダリングされます.
state:構成部品で使用される変数
setState:構成部品で使用する変数を置き換える機能
useState:構成部品で使用する変数を作成する機能

setState()を使用する際の注意事項

const onClickFunction = () => {
	setState(count + 1);
    setState(count + 1);
    setState(count + 1);
}
上記のonClickFunction関数を実行するとcountが3つ増えると考える人もいるかもしれません.
ただしsetStateはイベントハンドラで非同期で実行されます.
クリックイベントでsetState()を複数回実行するコードを作成します.
setState()は、ブラウザ内のイベントの終了時にstateを一括更新するため、一度だけ実行されます.
countは1万増加します.

なぜsetStateをすぐに実行しないのですか?

  • propsとstateの一貫性が損なわれる可能性があり、デバッグが困難なホットスポットを引き起こす可能性があります.
  • は、現在動作している新しい機能を実現することが困難になる可能性があります.
    簡単に言えば、setStateはパフォーマンスを向上させるためにすぐに実行されず、不要なレンダリングを回避します.
  • state、setState、useStateの使用方法

  • 会員入力、投稿内容などをサーバコンピュータに転送し、変数に入れるために使用されます.
  • によって記述された内容を検証し、エラー部分を赤でマークします.
  • propsとstateは通常のJavaScriptオブジェクトであり、両方のオブジェクトにはレンダリングの成果物に影響を与える情報があります.
    しかしpropsは関数パラメータのように素子に渡され,stateは素子で管理される.

    2. props


    構成部品を2つに分割すると、2つの構成部品間のデータと機能の接続が切断されます.
    これらを接続するのはpropsで,propsは親が持つ変数,関数を子供に伝える.
    また、親コンポーネントが支柱を継承する場合は、それをオブジェクトとしてバインドします.

    上記のように、propsをスキップすると、サブアセンブリ内のpropsがスキップされます.handleChangeWriterで呼び出すことができます.
    これは、propsがオブジェクトに移行するため、propsというオブジェクトのhandleChangeWriterを割り当てるように動作します.