re rendering conditions

https://github.com/Ark-inflearn/inflearn-clone-front/issues/83
sprintと言えるかどうかはわかりませんが
ARKプロジェクトを進めていく中で、技術負債を積み立てた問題は今回2つだけ解決したい.

再レンダリング条件

要素

を正しく分離する方法
以上の2つは独立したテーマではないかもしれません.
しかし、まずレンダリング条件について説明します.
私が知っていることを事前にメモしてから聞いてください.
私の知っている限りでは、ステータス(redux storeまたはusestate)とpropが変更されると、レンダリングは再実行されます.
私の錯覚はstateやpropの影響を直接受ける(その値を使用する)素子だけを変えると思っています.
今回,この記事の上部リンク「ホットスポット83」ではstateを直接使用しない素子も再レンダリングされることが分かった.
この機会に、構成部品の再レンダリングの条件を明確にしたいと思います.

再生条件

class component

1.ステータス変更時
2.新しい道具があるとき
3.親構成部品をレンダリングする場合
4.shouldComponentUpdateがtrueを返す場合

prop、ステータス変更時にshouldComponentUpdateを実行して再レンダリング

強制更新運転時

この方法は、

propsまたはstate以外の値を変更したときに再レンダリングする場合に使用できます.

関数型構成部品では使用できませんが、usStateを使用します.

re-rendering test

州変更時

// app.js
import TestPage from './components/TestPage';

const DivDiv = styled.div``;

function App() {
  const [test, setTest] = useState(0);
  function onClickButton() {
    setTest(prev => (prev += 1));
  }
  return (
    <div>
      <nav>
        <button onClick={onClickButton}>test button</button>
        {test}
      </nav>
      <header>
        <div>header</div>
        <div>header</div>
        <div>header</div>
        {/* <DivDiv>header</DivDiv> */}
      </header>
      <main>
        <TestPage />
      </main>
      <footer>
        <div>footer</div>
        <div>footer</div>
        <div>footer</div>
      </footer>
    </div>
  );
}

// TestPage.js
const TestPage = () => {
  return (
    <div>test</div>
  );
};

export default TestPage;

注記がない場合(styled-コンポーネントを無効にします)

注釈とstyled-コンポーネントの使用

のステータス値が変化すると、構成部品の上部にある要素が再描画されます.

にインポートされた構成部品も再レンダリングされます.

スタイル-コンポーネントを使用した装飾も再描画されます.

支柱交換時は

テストを行いましたが、添付しません.

で交換された支柱にのみ適用される構成部品が再描画されます.

考察する

stateが変化するとstyled-componentを使用するすべての構成部品が再描画されるため、パフォーマンスに及ぼす影響を決定するための別の方法を考慮する必要があります.

うっかりして問題#83を思い出し、状態が変わるとすべての要素が再現されると思っていたが、事実はそうではなかった.

スタイル-コンポーネントまたは

インポート構成部品または

では、ページの上部にある構成部品が再描画されていることがわかります.

importコンポーネントが再レンダリングされる理由は条件3です.親構成部品がレンダリングされると、子構成部品もレンダリングされます.

styled-コンポーネントが再表示される理由は2つあります.

1)サブアセンブリとして認識され、

.

2) {} != 仮想DOMがcss-in-jsを使用している場合、{}は変更を特定できません.

の感情も再び現れます.

これは、

の上の例示的なコードにおいて、トップレベルdivではなく<>を使用した結果である.
上部にあるdivが消えるにつれて、その下にあるnav、header、main、footerが上部にあり、状態の変化に伴ってnav、header、main、footerが再表示されます.

実際,re-renderingを考慮すると,コンポーネントを細かく記述することは困難である.
重要なのは、パフォーマンスに悪影響を及ぼす可能性があるか、小さすぎて見えない可能性があることです.
個人的には、明らかなパフォーマンスの問題がなければ、再レンダリングをよく考える必要はありません.

リファレンス

https://seungddak.tistory.com/109

テストコード

emotion test code

感情

これから読む文章

When does React re-render components?

When does React re-render components?

Reactにおけるレンダリングの最も重要な概念について、および所与のコンポーネントを再レンダリングする方法を決定する.

Rendering in React

The red dots represent updates of the DOM tree.
Updating the VDOM doesn't necessarily trigger an update of the real DOM.

const App = () => {
  const [message, setMessage] = React.useState('');
  return (
    <>
      <Tile message={message} />
      <Tile />
    </>
  );
};

The red dots again represent renders.
In React, this means calling the render function. In the real DOM, this means re-painting the UI.

赤は構成部品関数の実行を表しますが、実際には異なる場合があります.

しかしrender関数の実行には2つの欠点がある.

1)Reactは、各コンポーネント上でDiffingアルゴリズムを実行して、UIを更新する必要があるかどうかを決定しなければならない.

2)レンダー関数または関数コンポーネントのすべてのコードが再実行されます.

How to optimize re-renders

低効率再レンダリングの例は、親コンポーネントがサブコンポーネントの状態を制御することである.

Controlling when a component should update

制御コンポーネントの更新が必要な時点

React.memo

ページレイアウト全体で、ページが変化するたびに、サブページに適した方法で作成された場所にmemoを適用しても無駄です.

const CourseLayout = React.memo(({ children }: IProps) => {
  // render page
});
// memo를 적용해도 달라지는 것은 없었다.

Be careful where you place your logic. If you put everything in the root component of your application, all the React.memo functions in the world won't help you to fix your performance problems.

だったからか

Structure of your components

の再レンダリングを改善するより良い方法は、コードを少し再編成することです.

usStateは、使用するコンポーネントで使用を宣言したほうがいいと述べた.

カテゴリボタンを交換する際に他のカテゴリボタンに影響を与える必要があるため、最適な構造ではありませんが、親コンポーネントのstateしか使用できません.それでもuserefに改善することは良い試みと経験である.

考察する

スタイル-コンポーネントまたは感情のcss-in-js方式を使用して、react devツールで確認すると、再表示が続くように見えます.
しかし、実際には、再表示が異なる可能性があります.
しかし、最悪の場合、実際に再現される可能性もある.

これを確認する方法はありますか?

開発者ツールで検証

you can do so in the Chrome DevTools, under the three-dot menu on the right -> More tools -> Rendering -> Paint flashing.

スタイル-コンポーネントを使用するとreact devツールは再表示としてマークされますが、実際にはDOMで再表示されません.

クロム開発ツールでは、More Tools->Rendering->Paint flash.styled−componsesはreact dev toolで再提示されたように見えるが,実際には再提示されていないことが確認された.

第83期の回顧

#87では、改善コードを反映していない既存のコードは、実際にreact devツールとは異なり、実際のブラウザDOMによって再表示されるのは異なる.

でも、改良されたコードは意味がないわけではありません.render関数の実行は2つの欠点を防止できるからです.

および実際のJavaScriptコードの実行量自体が減少し、パフォーマンスが向上する可能性があります.

幸いなことに、反応は想像以上に賢く、実際の変化の要素だけを再現した.

リファレンス

https://felixgerschau.com/react-rerender-components/