ホームページ > 記事 > ウェブフロントエンド > React が setstate を呼び出した後に何が起こるか
react が setstate を呼び出した後に起こること: 1. 受信したパラメーター オブジェクトをコンポーネントの現在の状態とマージして、調整プロセスをトリガーします; 2. 新しい状態に基づいて React 要素ツリーを構築し、 UI インターフェイス全体; 3. 要素ツリーを取得した後、React は新しいツリーと古いツリーの間のノードの差を計算し、最小化して再レンダリングします。
このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。
React は、ページを再レンダリングするための setState メソッドを設計しました
setState() を記述して状態を更新する 2 つの方法
setState(updater, [callback])、updater は stateChange オブジェクトを返す関数です: (state, props) => stateChange stateChange によって受け取られる state と props は最新であることが保証されます
setState(stateChange , [callback])、stateChange はオブジェクトであり、callback はオプションのコールバック関数であり、ステータスが更新され、インターフェイスが更新された後に実行されます。
概要: オブジェクト メソッド新しい状態が元の状態に依存しない場合は function メソッドの略称 ===> 新しい状態が元の状態に依存する場合は object メソッドを使用 ===>; 取得する必要がある場合は function メソッドを使用するsetState() の後の最新の状態データは、2 番目のコールバック関数で読み取ります
setState を呼び出した後はどうなりますか?
コード内で setState 関数を呼び出した後、React は渡されたパラメーター オブジェクトをコンポーネントの現在の状態とマージし、いわゆる調整プロセス (Reconciliation) をトリガーします。
調整プロセスの後、React は比較的効率的な方法で新しい状態に基づいて React 要素ツリーを構築し、UI インターフェイス全体の再レンダリングを開始します。
React が要素ツリーを取得した後、React は新しいツリーと古いツリーの間のノードの差を自動的に計算し、その差に基づいてインターフェイスを最小化し、再レンダリングします。
差分計算アルゴリズムでは、React はどの位置が変更され、どのように変更されるべきかを比較的正確に認識できるため、完全な再レンダリングではなくオンデマンドの更新が保証されます。
推奨される学習: 「react ビデオ チュートリアル 」
以上がReact が setstate を呼び出した後に何が起こるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。