jQueryナビゲーションロジックを反応に変換します：レスポンシブメニューを実装し、吸着効果をスクロールする

この記事では、Reactフレームワークに従来のjQueryナビゲーションバーの相互作用ロジック（ハンバーガーメニューの切り替えと吸着効果のスクロールを含む）を移行する方法に関する詳細なガイダンスを提供します。 ReactのUseStateおよび使用Effectフックを活用することにより、コンポーネントの状態およびDOM操作を効率的に管理する方法を示し、それにより、応答性とパフォーマンスが最適化されたナビゲーション機能を実現し、DOMの直接操作を回避し、コードメンテナビリティを改善します。

現代のWeb開発では、JQueryなどの命令的なJavaScriptライブラリからReactなどの宣言的なフレームワークに移行することは一般的な要件です。これにより、アプリケーションのパフォーマンスと保守性が向上するだけでなく、コンポーネント開発のパラダイムにより適応します。このチュートリアルでは、jQueryのコードロジックを変換してハンバーガーメニューの切り替えと吸着効果のスクロールを反応成分の実装に処理する方法を詳細に説明する例として、共通のナビゲーションバー機能を概説します。

1.ハンバーガーメニューの切り替えの反応実装

オリジナルのjQueryコードは、.navtriggerのクリックイベントに耳を傾け、toggleclassを使用して.navtriggerと#mainlistdivのクラス名を切り替えて、メニューを表示/隠し、アイコンスタイルを変更する目的を達成します。 Reactでは、コンポーネントの内部状態を管理することにより、この効果を達成する必要があります。

1。JQUERYオリジナルロジックレビュー

$（'。Navtrigger '）。クリック（function（）{
    $（this）.toggleclass（ 'Active'）;
    $（ "＃mainlistdiv"）。toggleclass（ "show_list"）;
    $（ "＃mainlistdiv"）。fadein（）; //ここのフェデインは通常、CSSアニメーションを通じて実装されます}）;

2。状態管理の実装を反応します

Reactでは、UseStateフックを使用して、メニューのオン/オフ状態を制御する状態変数を宣言します。ユーザーがハンバーガーメニューアイコンをクリックすると、この状態変数を更新し、状態変数の値に従ってCSSクラスを動的に追加または削除します。

 「React」からReact、{UseState}をインポートします。
Import './Navbar.css'; // cssファイルがインポートされていることを確認してくださいconst navbar =（）=> {
  //状態変数を定義して、メニューが拡張されているかどうかを制御します[ismenuopen、setismenuopen] = uesestate（false）;

  //クリックイベントの処理関数を定義するconst togglemenu =（）=> {
    Setismenuopen（！ismenuopen）; //メニューの拡張ステータスを切り替えます};

  戻る （
    <div classname="header">
      <nav classname="nav"> {/* affixクラスは次のセクションで処理されます*/}
        <div classname="container">
          <div classname="logo">
            <a href="%EF%BC%83">あなたのロゴ</a>
          </div>
          {/* IsMenuopenステータスに従って、 'show_list' class*/}を動的に追加します
          <div id="mainlistdiv" classname="{`main_list">
            <ul classname="navlinks">
              <li> <a href="%EF%BC%83"> bout </a> </li>
              <li> <a href="%EF%BC%83">ポートフォリオ</a> </li>
              <li> <a href="%EF%BC%83">サービス</a> </li>
              <li> <a href="%EF%BC%83">連絡先</a> </li>
            </ul>
          </div>
          {/* IsMenuopenステータスに従って、「アクティブ」クラスを動的に追加します*/}
          <span classname="{`navtrigger" onclick="{togglemenu}">
            <i> </i>
            <i> </i>
            <i> </i>
          </span>
        </div>
      </nav>
    </div>
  ）;
};

デフォルトNavbarをエクスポートします。

キーポイント：

• UseState（false） ：IsMenuopenステータスをFalseに初期化します。つまり、メニューはデフォルトで閉じられています。
• Togglemenu関数：Navtriggerをクリックするたびに、Ismenuopen状態が逆になります。
• 条件付きクラス名：JSXでは、テンプレート文字列と3成分演算子を使用して、イスメヌーペンの状態に基づいて要素のCSSクラスを動的に追加または削除します。たとえば、classname = {navtrigger $ {ismenuopen？ 「Active」： ""}}は、Ismenuopenが真実であるときにアクティブクラスを追加します。
• フェデイン効果：jQueryのフェデイン（）は、通常、ディスプレイまたは視認性の特性と組み合わせたCSSの不透明度と遷移特性を切り替えることで実現されます。 show_listクラスが追加されると、CSSは対応する遷移アニメーションを定義する必要があります。

2。ハンドルスクロールイベント：ナビゲーションバーの吸着効果を実現します

jQueryは、ウィンドウのスクロールイベントを聞くことで巻物の位置を判断し、条件に応じて接辞クラスを追加または削除します。 Reactでは、Effectフックを使用して、イベントリスナーの追加や削除など、このような副作用に対処します。

1。JQUERYオリジナルロジックレビュー

$（window）.scroll（function（）{
    if（$（document）.scrolltop（）> 50）{
        $（ '。nav'）。addclass（ 'affix'）;
    } それ以外 {
        $（'。NAV '）。REMOVECLASS（' Affix '）;
    }
}）;

2。EFFECTの実装を使用します

コンポーネントがマウントされたときにスクロールイベントリスナーを追加して、コンポーネントがアンインストールされているときにそれを削除するために、Useefectフックを使用する必要があります。

 Reactをインポート、{useState、useefcect} from 'React';
Import './Navbar.css';

const navbar =（）=> {
  const [ismenuopen、setismenuopen] = uesestate（false）;
  //ナビゲーションバーが吸着されているかどうかを制御するために状態変数を定義します[isaffixed、setisaffixed] = uesestate（false）;

  const togglemenu =（）=> {
    Setismenuopen（！ismenuopen）;
  };

  // useeffectを使用してスクロールイベントリスナーを管理するeffect（（）=> {
    const handlescroll =（）=> {
      //スクロール位置が50pxを超えるかどうかを判断します
      if（window.scrolly> 50）{
        setisaffixed（true）; //吸着状態に設定} else {
        setisaffixed（false）; //吸着状態を削除}
    };

    //コンポーネントがWindow.AddeventListener（ 'Scroll'、handlescroll）をマウントしたときにスクロールイベントリスナーを追加します。

    // component unroling returns（）=> {componentを削除するためにクリーンアップ関数を返してイベントリスナーを削除します
      window.removeeventlistener（ 'scroll'、handlescroll）;
    };
  }、[]）; //空の配列は依存関係として使用され、コンポーネントがマウントされてアンインストールされた場合にのみ返品が実行されることを示します（
    <div classname="header">
      {/* ISAFFIXEDステータスに従って、「Affix」クラスを動的に追加します*/}
      <nav classname="{`nav">
        <div classname="container">
          <div classname="logo">
            <a href="%EF%BC%83">あなたのロゴ</a>
          </div>
          <div id="mainlistdiv" classname="{`main_list">
            <ul classname="navlinks">
              <li> <a href="%EF%BC%83"> bout </a> </li>
              <li> <a href="%EF%BC%83">ポートフォリオ</a> </li>
              <li> <a href="%EF%BC%83">サービス</a> </li>
              <li> <a href="%EF%BC%83">連絡先</a> </li>
            </ul>
          </div>
          <span classname="{`navtrigger" onclick="{togglemenu}">
            <i> </i>
            <i> </i>
            <i> </i>
          </span>
        </div>
      </nav>
    </div>
  ）;
};

デフォルトNavbarをエクスポートします。

キーポイント：

• UseEffect ：コンポーネントの副作用を扱うために使用されます。ここで、副作用は、グローバルなスクロールイベントリスナーを追加および削除することです。
• 依存関係配列[] ：useefectの2番目のパラメーターが空の配列である場合、使用効果のコールバック関数は、コンポーネントがマウントされたときに1回だけ実行され、コンポーネントがアンロードされたときに返されるクリーンアップ関数は1回実行されます。これにより、イベントリスナーが適切に追加および削除され、メモリリークが回避されます。
• window.scrolly ：現在のページの垂直スクロール位置を取得するために使用されます。 document.documentelement.scrolltopは、ブラウザの互換性に応じて同じ目的を達成することもできますが、window.scrollyはよりモダンです。
• ISAFFIXEDステータス：NAV要素に接辞クラスがあるかどうかを制御します。

3.予防策とパフォーマンスの最適化

1. CSSはCoreです。CSSクラス名を動的に追加/削除するのにのみ責任があります。すべての視覚効果（ハンバーガーメニューアイコンのX字型変換、メニュー拡張アニメーション、ナビゲーションバーの背景色の変更など）をCSSファイルで定義する必要があります。 CSSファイルがCodePenのスタイルと一致していることを確認し、Active、Show_list、Affixなどのクラス名のスタイルを正しく処理します。

2. 直接DOM操作を避けてください：Reactはuserefを提供してDOM要素を直接アクセスしますが、コンポーネント状態を管理し、ReactがDOMを宣言的に更新させることをお勧めします。このチュートリアルの方法は、クラスリストを直接操作するのではなく、状態を介してクラス名を制御することにより、この原則に従います。

3. スクロールイベントのパフォーマンスの最適化：スクロールイベントは、短期間で複数回トリガーされる可能性があり、ステータスの頻繁な更新はパフォーマンスの問題を引き起こす可能性があります。高頻度でトリガーされたイベント（スクロール、サイズ変更など）の場合、イベント処理機能の実行頻度を制限するために、スロットリングまたは吹き飛ばす手法を使用することをお勧めします。

   • スロットリング：一定期間以内に関数を1回だけ実行します。
   • 討ち：イベントが一定期間トリガーを停止した後、関数は実行されます。

   これは、ハンドルクロール関数に統合できる簡単なスロットリングの実装の例です。

    reactをインポート、{useState、useefect、useref、usecallback} from 'React';
   Import './Navbar.css';
   
   const navbar =（）=> {
     const [ismenuopen、setismenuopen] = uesestate（false）;
     const [isaffixed、setisaffixed] = uesestate（false）;
   
     const togglemenu =（）=> {
       Setismenuopen（！ismenuopen）;
     };
   
     //スロットリング関数const throttle =（func、delay）=> {
       インスロットルしましょう。
       return function（）{
         const args = arguments;
         const context = this;
         if（！inthrottle）{
           func.apply（context、args）;
           inthrottle = true;
           setimeout（（）=>（inthrottle = false）、遅延）;
         }
       };
     };
   
     // usecallbackを使用してハンドルクロールを避け、constハンドルクロールをレンダリングするたびにconst handlescroll = usecallback（
       スロットル（（）=> {
         if（window.scrolly> 50）{
           setisaffixed（true）;
         } それ以外 {
           setisaffixed（false）;
         }
       }、100）、// 100ミリ秒ごとに最大1回実行[]
     ）;
   
     effect（（）=> {
       window.addeventlistener（ 'scroll'、handlescroll）;
       return（）=> {
         window.removeeventlistener（ 'scroll'、handlescroll）;
       };
     }、[handlescroll]）; //ハンドルクロールに依存します
   
     戻る （
       <div classname="header">
         <nav classname="{`nav">
           <div classname="container">
             <div classname="logo">
               <a href="%EF%BC%83">あなたのロゴ</a>
             </div>
             <div id="mainlistdiv" classname="{`main_list">
               <ul classname="navlinks">
                 <li> <a href="%EF%BC%83"> bout </a> </li>
                 <li> <a href="%EF%BC%83">ポートフォリオ</a> </li>
                 <li> <a href="%EF%BC%83">サービス</a> </li>
                 <li> <a href="%EF%BC%83">連絡先</a> </li>
               </ul>
             </div>
             <span classname="{`navtrigger" onclick="{togglemenu}">
               <i> </i>
               <i> </i>
               <i> </i>
             </span>
           </div>
         </nav>
       </div>
     ）;
   };
   
   デフォルトNavbarをエクスポートします。

   上記のコードでは、単純なスロットル関数を導入し、USeCallbackを使用してハンドルクロールをラップして、ハンドルクロールがコンポーネントの寿命を通じて安定したままであることを確認し、使用効率の不必要な再解決を回避します。

要約します

このチュートリアルを通して、従来のjQueryナビゲーションバーの相互作用ロジック（ハンバーガーメニューの切り替えと吸着効果のスクロールを含む）をReactフレームワークに移行する方法を学びました。コアは、ReactのUseState Hookを使用してコンポーネントの状態を管理し、Effectフックを介して副作用（イベントリスナーなど）を処理することです。また、DOMの直接操作を避けるためにReactの宣言的なプログラミングパラダイムをフォローします。この変換により、コードがより読みやすく保守可能になるだけでなく、高性能反応アプリケーションを構築するための基盤を置きます。 CSSはこれらの視覚効果を達成するための鍵であり、Reactはアプリケーション状態に基づいて正しいCSSクラスを動的に適用する責任があることを忘れないでください。

以上がjQueryナビゲーションロジックを反応に変換します：レスポンシブメニューを実装し、吸着効果をスクロールするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。