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をすぐに実行しないのですか?
簡単に言えば、setStateはパフォーマンスを向上させるためにすぐに実行されず、不要なレンダリングを回避します.
state、setState、useStateの使用方法
しかしpropsは関数パラメータのように素子に渡され,stateは素子で管理される.
2. props
構成部品を2つに分割すると、2つの構成部品間のデータと機能の接続が切断されます.
これらを接続するのはpropsで,propsは親が持つ変数,関数を子供に伝える.
また、親コンポーネントが支柱を継承する場合は、それをオブジェクトとしてバインドします.
上記のように、propsをスキップすると、サブアセンブリ内のpropsがスキップされます.handleChangeWriterで呼び出すことができます.
これは、propsがオブジェクトに移行するため、propsというオブジェクトのhandleChangeWriterを割り当てるように動作します.
Reference
この問題について(React state, props), 我々は、より多くの情報をここで見つけました https://velog.io/@kingmo/React-state-propsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol