[react.js]userEffectの実行点

1.使用効果で苦しい経験
筆者はスクロールスケールに基づいてアニメーションを開始するページを開発している.
canvasまたはdivのプロパティをスクロール比率に応じて変更する機能を実現し、アニメーションの変更が必要な要素をuserefで登録し、react-router-domを使用してAページからBページに移動する......
(経験後追加補正前✔)
2.UseEffect運転点
2-1. じっけんコード
1. App.js

import React, { useState, useEffect, useLayoutEffect } from 'react';
import Section1 from './components/Section1';
import Section2 from './components/Section2';

const App = () => {
  const [compo, setCompo] = useState('초기화');

  const firstClick = () => {
    setCompo(<Section1></Section1>)
  }
  const secondClick=()=> {
    setCompo(<Section2></Section2>)
  }


  return(
    <>
      <button onClick={firstClick}> section1 </button>
      <button onClick={secondClick}> section2 </button>
      {compo}
    </>
  )
}

export default App;

2. Section1.jsx

import React, { useState, useEffect, useLayoutEffect } from 'react';

const Section1 = () => {

    const [title, setTitle] = useState('section1');

    console.log('section1 rendered')

    useEffect(()=> {
        console.log('section1 useEffect start');

        return(()=> {
            console.log('section1 useEffect return start');
        })
    }, [])

    return(
        <>
          <div>
              {title} 입니다.
          </div>
        </>
    )
}

export default Section1;

3. Section2.jsx

import React, { useEffect, useState } from 'react';

const Section2 = () => {

    const [title, setTitle] = useState('section2');

    console.log('section2 rendered')

    useEffect(()=>{
        console.log('section2 useEffect start');

        return(()=> {
            console.log('section2 useEffect return start')
        })
    }, []);

    return(
        <>
            {title} 입니다.
        </>
    )
}

export default Section2;

2-2. コードの説明
1. App.js

Section1.jsx, Section2.jsxをインポートし、2つのボタンをレンダリングします.

セレクション1を開くには、ボタンをクリックします.jsxまたはSection 2.jsxがレンダリングされます.

2. Section1.jsx, Section2.jsx(汎用)

コンポーネントをレンダリングすると、コンソールはsection1 (or section2) rendered.を出力します.

userEffectが実行されると、section1 (or section2) useEffect startがコンソールに出力されます.

構成部品がアンインストールされると、useEffectは戻り、section1 (or section2 useEffect return startがコンソールに書き込まれます.

2-3. コード進捗(コンソールステータス)

section 1ボタンをクリックします.

素子レンダリング後のuserEffectを表示します.

section 2ボタンをクリックします.

順番を並べると、

オプション2の構成部品がレンダリングされます.

Section 1のuseEffectは戻りを実行します.

Section 2のuseEffectが実行されます.

次の構成部品をレンダリングし、前の構成部品のuserEffectを完了し、次の構成部品のuserEffectを実行します.
3.結論
3-1. useEffect順序

レンダー構成部品

useEffectの実行

(A page 👉 B page)

B素子レンダリング

A useEffect returnの実行

B useEffectの実行