レンダリングと再レンダリング

技術的にサービスを提供することを意味します.
一方、反応を使用して、我々はすべての単語を何千ものレンダリングを聞いたことがあります.何が正確に反応をレンダリングしますか?
画面上のHTML要素をレンダリングします.DOMオブジェクトを作成します.

レンダリングはどうなりますか？

単純なコードを書く際に、method render ()を使用します.
例を考えてみましょう.

import React from "react";
import ReactDOM from "react-dom";

const App =()=>{
   return <div>
        Hello World!   
       </div>
}

ReactDOM.render(<App/>,document.querySelector("#root");

ここで、アプリケーションコンポーネントはIDルートを持つ要素内でレンダリングされます.反応して、我々はHTML要素としてスクリーンに表示されるJSX要素を書きます.JSX要素が書き込まれると、画面上に表示する必要があります.これはreactdomのrender ()関数を使用します.

レンダリング関数には2つのパラメータが必要です.

表示されるもの
2 .表示する場所.

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render("Hello World!",document.querySelector("#root");

上記と同じ結果が表示されます.
ここでは、こんにちは世界は表示されます、そして、それはIDルートで要素の内部に表示されます.
反応コンポーネント内の要素は、2つの手順でDOMにマウントされます.
レンダリングフェーズにおいて、反応において、書き込まれるコンポーネントは階層的な順序において、木を形成する.
一旦仮想DOMがつくられるならば、形成されます.次に、コミットフェーズが始まり、仮想DOMが実際のDOMに作成されます.これは最初のレンダリングです.

何が再レンダリング時に発生する？

再描画は、要素を反応させるときに発生します.
つまり、要素にsetStateを使用すると、要素が変更されます.要素が変更されると、要素のその部分が仮想DOMにマークされます(実際のDOMは変更されませんが、反応が速い理由である仮想DOMで変更されるのではないかということに注意してください)、次に、反応はすべてのマークされた要素のために要素を作成し、変更は仮想DOMで行われます.仮想DOMが変更されると、DOMはDOMを以前のDOM状態と比較します.
要素が同じままの場合、DOMは更新されません.

なぜあまりにも多くの再レンダリングが起こる？

私は反応を使用し始めたときにあまりにも多くの再レンダリングのあまりにも多くのミスを犯した.これは私が作った間違いです.const [data,setData]=useState();1 . JSX要素にsetDataを使用する場合.

return <div>
<p>Hello world<p>
{setData(data+1)}
</div>

コンポーネントがレンダリングされ、setdataが表示され、データが設定され、再度レンダリングされます.
2 .依存データとしてデータを使用してSetDataを使用します.これは間違っています.これは、データが変更されたときにuseeffectが実行され、setdataを使用するたびにデータが変更されるために起こります.

useEffect(() => {
       setData(data+1);
      return () => {
      setData();
    }
  }, [data])

これは、JSXの要素をどのようにレンダリングするかです.したがって、「コミットフェーズは通常非常に速いです、しかし、レンダリングは遅くありえます.」