フロントエンドに焦点を当てたインタビューでは、DSA がまったく考慮されないことがよくあります。
そして、学校や大学で DSA を勉強したことを覚えている人にとって、すべての例は (正当な理由から) 純粋にアルゴリズムのように感じられましたが、私たちが毎日使用する製品がこの概念をどのように活用しているかについての例やガイダンスはほとんどありませんでした。
「これが必要になることはありますか?」
このことをよく尋ねますよね? ?
ここでは、React アプリで今すぐ利用できるデータ構造をいくつか紹介します。 ?
目次
- はじめに
- 配列: 状態管理の頼りになる
- オブジェクトとハッシュ マップ: 効率化のための正規化されたデータ ストア
- 二重リンクリスト: コンテキストによるナビゲーション
- スタック: 不変の動作を伴う元に戻す/やり直し機能
- キュー: 連続した API 呼び出しの管理
- ツリー: 再帰コンポーネントのレンダリング
- グラフ: 複雑なデータ関係とナビゲーションの構築
- 結論
関連書籍:


SDE1 から SDE2、そしてその先へ! ?実際に必要なこと。
ミドルウェア担当 Jayant Bhawal ・ 6 月 10 日
1. 配列 ?: 状態管理の頼りになるもの
配列は React のいたるところにあります。 .map() または .filter() がどのように機能するかを理解するのに助けが必要な場合は、おそらくこの投稿が少し早すぎると思われます。ただし、心配しないでください。これらの配列メソッドに慣れれば、リストのレンダリング、コンポーネントの状態の管理、データの変換にこれらのメソッドがいかに重要であるかがわかります。
2. オブジェクトとハッシュ マップ ?️: 効率を高める正規化されたデータ ストア
React アプリでユーザーや投稿などのエンティティの大規模なコレクションを扱う場合、データをオブジェクト (ハッシュ マップ) に正規化すると、読み取りと更新がはるかに効率的になります。深く入れ子になった構造を操作する代わりに、エンティティを ID によってマップします。
例: ID を持つ正規化されたストアからの読み取り
const postsById = { 1: { id: 1, title: 'First Post', content: 'Content of first post' }, 2: { id: 2, title: 'Second Post', content: 'Content of second post' } }; const postIds = [1, 2]; function PostList() { return ( <div> {postIds.map(id => ( <post key="{id}" post="{postsById[id]}"></post> ))} </div> ); } function Post({ post }) { return ( <div> <h2 id="post-title">{post.title}</h2> <p>{post.content}</p> </div> ); }
このパターンにより、特にコレクション全体を再レンダリングせずに更新や読み取りを迅速に行う必要がある大規模なデータセットの場合に、効率的なデータ アクセスが可能になります。
3. 二重リンクリスト ?: コンテキストによるナビゲーション
二重リンクリストは、前と次の要素の両方からコンテキストが必要な場合に便利です。各画像が参照用に隣接する画像を表示するフォトギャラリーをナビゲートすることを考えてください。インデックスを使用する代わりに、現在のノードをコンポーネントの状態に直接保存します。
例: コンテキストを持つ要素間のナビゲーションのための二重リンクリスト
class Node { constructor(value) { this.value = value; this.next = null; this.prev = null; } } class DoublyLinkedList { constructor() { this.head = null; this.tail = null; } add(value) { const newNode = new Node(value); if (!this.head) { this.head = newNode; this.tail = newNode; } else { this.tail.next = newNode; newNode.prev = this.tail; this.tail = newNode; } } } const imageList = new DoublyLinkedList(); imageList.add({ id: 1, src: 'image1.jpg', alt: 'First Image' }); imageList.add({ id: 2, src: 'image2.jpg', alt: 'Second Image' }); imageList.add({ id: 3, src: 'image3.jpg', alt: 'Third Image' }); function Gallery() { const [currentNode, setCurrentNode] = useState(imageList.head); return ( <div> {currentNode.prev && ( <img src="%7BcurrentNode.prev.value.src%7D" alt="{currentNode.prev.value.alt}" classname="prev-image"> )} <img src="%7BcurrentNode.value.src%7D" alt="{currentNode.value.alt}" classname="main-image"> {currentNode.next && ( <img src="%7BcurrentNode.next.value.src%7D" alt="{currentNode.next.value.alt}" classname="next-image"> )} <div> <button onclick="{()"> setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}> Previous </button> <button onclick="{()"> setCurrentNode(currentNode.next)} disabled={!currentNode.next}> Next </button> </div> </div> ); }
この React コンポーネント内:
- 現在のノードは状態に保存され、前または次のノードが存在するかどうかに基づいて UI が更新されます。
- ボタンを使用すると、ユーザーはリストを前後に移動でき、移動先のノードがない場合は無効にできます。
- この構造は、カルーセル、メディア ギャラリー、プレイリストなどの UI コンポーネントで一般的に使用される、周囲の要素からのコンテキストを使用して リアルタイム ナビゲーション をシミュレートします。
4. スタック ?: 不変の動作を伴う元に戻す/やり直し機能
スタックを使用すると、後入れ先出し (LIFO) ロジックを使用して、元に戻す/やり直し 操作を効率的に管理できます。不変操作 (concat、slice) を使用することで、状態が変更されないままであることを保証できます。
例: 不変のプッシュとポップによる元に戻す/やり直し
const [undoStack, setUndoStack] = useState([]); const [redoStack, setRedoStack] = useState([]); const [formState, setFormState] = useState({ name: '', email: '' }); const updateForm = (newState) => { setUndoStack(prev => prev.concat([formState])); // Immutable push setRedoStack([]); // Clear redo stack setFormState(newState); }; const undo = () => { if (undoStack.length > 0) { const lastState = undoStack.at(-1); setUndoStack(prev => prev.slice(0, -1)); // Immutable pop setRedoStack(prev => prev.concat([formState])); // Move current state to redo setFormState(lastState); } }; const redo = () => { if (redoStack.length > 0) { const lastRedo = redoStack.at(-1); setRedoStack(prev => prev.slice(0, -1)); // Immutable pop setUndoStack(prev => prev.concat([formState])); // Push current state to undo setFormState(lastRedo); } };
5. キュー ?: 連続した API 呼び出しの管理
キューは 先入れ先出し (FIFO) 方式で動作し、API 呼び出しや通知などのタスクが正しい順序で処理されるようにするのに最適です。
例: API 呼び出しのキューイング
const [apiQueue, setApiQueue] = useState([]); const enqueueApiCall = (apiCall) => { setApiQueue(prevQueue => prevQueue.concat([apiCall])); // Immutable push }; const processQueue = () => { if (apiQueue.length > 0) { const [nextCall, ...restQueue] = apiQueue; nextCall().finally(() => setApiQueue(restQueue)); // Immutable pop } };
6. ツリー ?: 再帰コンポーネントのレンダリング
ツリーは、React で コメント スレッド、フォルダー構造、または メニュー などのネストされたコンポーネントを処理するときによく使用されます。
例: コメント ツリーを再帰的にレンダリングする
const commentTree = { id: 1, text: "First comment", children: [ { id: 2, text: "Reply to first comment", children: [] }, { id: 3, text: "Another reply", children: [{ id: 4, text: "Nested reply" }] } ] }; function Comment({ comment }) { return ( <div> <p>{comment.text}</p> {comment.children?.map(child => ( <div style="{{" paddingleft: key="{child.id}"> <comment comment="{child}"></comment> </div> ))} </div> ); }
あなたに関連するかもしれないもう 1 つの人気の投稿:


記述は少なく、修正は不要: 信頼性の高いコードの技術
ミドルウェア用 Dhruv Agarwal ・ 6 月 17 日
7. Graphs ?: Building Complex Data Relationships and Navigation
Example 1: Routing between multiple views
You can represent routes between pages as a graph, ensuring flexible navigation paths in an SPA.
const routesGraph = { home: ['about', 'contact'], about: ['home', 'team'], contact: ['home'], }; function navigate(currentRoute, targetRoute) { if (routesGraph[currentRoute].includes(targetRoute)) { console.log(`Navigating from ${currentRoute} to ${targetRoute}`); } else { console.log(`Invalid route from ${currentRoute} to ${targetRoute}`); } }
Example 2: User relationship modeling
Graphs are perfect for modeling social connections or any kind of relationship where multiple entities are interconnected.
const usersGraph = { user1: ['user2', 'user3'], user2: ['user1', 'user4'], user3: ['user1'], user4: ['user2'] }; function findConnections(userId) { return usersGraph[userId] || []; } console.log(findConnections('user1')); // Outputs: ['user2', 'user3']
Note: We use graphs to show reviewer dependencies in Middleware.
TL;DR — Those School Lessons Pay Off
Those DSA classes might have felt abstract back in the day, but data structures are powering the world around you in React.
Objects, stacks, queues, linked lists, trees, and graphs are more than just theory — they’re the backbone of the clean, efficient, and scalable apps you build every day.
So the next time you manage state in a queue or handle complex UI logic, remember: you’ve been training for this since school. ?
Let me know which data structures you’ve been using the most!
以上がフロントエンド開発 + データ構造とアルゴリズム: DSA がどのように React アプリを強化できるか ⚡の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SublimeText3 中国語版
中国語版、とても使いやすい

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Dreamweaver Mac版
ビジュアル Web 開発ツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
