(コレクション) React でのよくある面接の質問の紹介-jsチュートリアル-php.cn

コンテナコンポーネントは、コンポーネントがどのように動作するかに重点を置いています。コンテナコンポーネントは、表示コンポーネントまたは他のコンテナコンポーネントにデータと動作 (動作) を提供し、Flux アクションを呼び出し、それらを表示コンポーネントへのコールバックとして提供します。コンテナコンポーネントは (他のコンポーネントの) データのソースであるため、多くの場合ステートフルです。

クラスコンポーネントと機能コンポーネントの違いは何ですか。

クラスコンポーネントでは、コンポーネント自体などの追加機能を使用できるだけでなく、ステートフックやライフサイクルフックもコンポーネントを有効にします。ストアに直接アクセスして状態を維持するには

コンポーネントが props のみを受け取り、コンポーネント自体をページにレンダリングする場合、そのコンポーネントは「ステートレスコンポーネント」です。そのようなコンポーネントは純粋な関数を使用して作成できます。このようなコンポーネントは、ダムコンポーネントまたはプレゼンテーションコンポーネントとも呼ばれます。

(コンポーネントの) 状態とプロパティ (props) の違いは何ですか。

State は、コンポーネントのデフォルト値に使用されるデータ構造です。コンポーネントのマウント時に必要なデータ。状態は時間の経過とともに変化する可能性がありますが、ほとんどの場合、ユーザーイベントの動作の結果として変化します。

Props (プロパティの略) はコンポーネントの構成です。小道具は親コンポーネントから子コンポーネントに渡され、子コンポーネントに関する限り、小道具は不変です。コンポーネントはそれ自身の props を変更できませんが、そのサブコンポーネントの props をまとめることはできます (統合管理)。小道具は単なるデータではありません。小道具を介してコールバック関数を渡すこともできます。

(コンポーネント) ライフサイクルメソッドの違いを指摘します

componentWillMount -- 主にルートコンポーネントでのアプリケーション構成に使用されます

componentDidMount -- すべてを使用できますここで完了 DOM なしでは実行できないすべての設定と、必要なすべてのデータの取得を開始します。イベントリスニングを設定する必要がある場合は、ここで完了することもできます。

componentWillReceiveProps -- この定期関数は状態に作用します。特定の prop の変更が原因です。遷移

shouldComponentUpdate -- コンポーネントの過剰レンダリングが心配な場合は、 shouldComponentUpdate を使用すると、コンポーネントが新しい props を受け取った場合に再レンダリングを防ぐことができるため、パフォーマンスを向上させることができます。 shouldComponentUpdate は、コンポーネントを再レンダリングする必要があるかどうかを決定するブール値を返す必要があります。

componentWillUpdate -- ほとんど使用されません。コンポーネントのcomponentWillReceivePropsと shouldComponentUpdate を置き換えるのに使用できます（ただし、前のプロパティにはアクセスできません）

componentDidUpdate -- propまたはstateの変更に応じてDOMを更新するためによく使用されます

componentWillUnmount -- ここで、ネットワーク要求をキャンセルするか、コンポーネント

# に関連するすべてのイベントリスナーを削除できます。

Ajax リクエストは React コンポーネントのどこで開始する必要がありますか

React コンポーネントでは、ネットワークリクエストは、componentDidMount で開始する必要があります。このメソッドは、コンポーネントが最初に「マウント」される (DOM に追加される) ときに実行され、コンポーネントのライフサイクルで 1 回だけ実行されます。さらに重要なのは、コンポーネントがマウントされる前にそれを保証できないことです。 Ajax リクエストが完了した場合は、アンマウントされたコンポーネントに対して setState を呼び出そうとしていることを意味しますが、これは機能しません。 ComponentDidMount でネットワーク要求を行うと、更新する準備ができているコンポーネントが存在することが保証されます。

制御コンポーネントとは

HTML では、、、<select> などのフォーム要素がユーザー入力に基づいて更新されます。ユーザーがフォームを送信すると、前述の要素の値がフォームとともに送信されます。しかし、React では少し異なります。form 要素を含むコンポーネントは状態の入力値を追跡し、onChange などのコールバック関数が呼び出されるたびに状態が更新され、コンポーネントが再レンダリングされます。このように React によって値が制御される入力フォーム要素を「制御対象要素」と呼びます。 </p> <h4 id="React-における-refs-の役割">React における refs の役割</h4> <p>Ref は、DOM ノードまたは React コンポーネントへの参照を取得するために使用できます。 ref を使用する場合の良い例としては、フォーカス/テキスト選択の管理、コマンドアニメーションのトリガー、サードパーティの DOM ライブラリとの統合などが挙げられます。 String Ref とインライン ref コールバックの使用は避けてください。 Refs コールバックは React によって推奨されています。 </p> <h4 id="高次コンポーネントとは何ですか">高次コンポーネントとは何ですか?</h4> <p>高次コンポーネントは、コンポーネントをパラメータとして受け取り、新しいコンポーネントを返す関数です。 HOC を使用すると、コード、ロジック、およびブートストラップ抽象化を再利用できます。最も一般的なのは、おそらく Redux の接続機能です。 HOC の最善の方法は、ツールライブラリと単純な構成を単純に共有することに加えて、React コンポーネント間で動作を共有することです。同じことを行うために別の場所に多くのコードを書いていることに気付いた場合は、コードを再利用可能な HOC にリファクタリングすることを検討する必要があります。 </p> <p>演習</p> <p>入力を反転する HOC を作成する</p> <p>API から受信コンポーネントにデータを提供する HOC を作成する</p> <p>実装する HOC を作成するshouldComponentUpdate 調整を回避するには HOC</p> <p>React.Children.toArray を通じて受信コンポーネントの子コンポーネントを並べ替える HOC を作成します</p> <h4 id="アロー関数を使用する利点は何ですか">アロー関数を使用する利点は何ですか</h4> <div> <p>スコープの安全性: アロー関数の前に、新しく作成された各関数には独自の this 値があります (コンストラクターでは、これは新しいオブジェクトです。厳密モードでは、関数呼び出しの this は未定義です。関数が「オブジェクト」と呼ばれる場合)メソッド」、その後に基礎となるオブジェクトなど) が使用されますが、アロー関数はそうではなく、囲んでいる実行コンテキストの this 値を使用します。 </p> <p>シンプル: アロー関数は読み書きが簡単です。</p> <p>明確: すべてがアロー関数であれば、通常の関数をすぐに使用してスコープを定義できます。開発者はいつでも、次に上位の関数ステートメントを探して this</p> </div> の値を確認できます。<h4 id="setState-に渡されるパラメータがオブジェクトではなくコールバックであることが推奨される理由">setState に渡されるパラメータがオブジェクトではなくコールバックであることが推奨される理由</h4> <p>this.props と this.state の更新は非同期である可能性があるため、それらの値は依存できません次の状態を計算します。 </p> <h4 id="コンストラクターで-code-this-code-をバインドする以外に-他の方法はありますか">コンストラクターで <code>this</code> をバインドする以外に、他の方法はありますか?</h4> <p>プロパティ初期化子を使用してコールバックを正しくバインドできます。create-react-app はデフォルトでもサポートされています。コールバックではアロー関数を使用できますが、問題は、コンポーネントがレンダリングされるたびに新しいコールバックが作成されることです。 </p> <h4 id="コンポーネントのレンダリングを防ぐ方法">コンポーネントのレンダリングを防ぐ方法</h4> <p>コンポーネントの render メソッドで null を返しても、トリガーされたコンポーネントのライフサイクルメソッドには影響しません</p> <h4 id="リストをレンダリングするとき-鍵は何ですか-キーを設定する目的は何ですか">リストをレンダリングするとき、鍵は何ですか？キーを設定する目的は何ですか</h4> <p>キーは、どの項目が変更、追加、削除されたかを React が識別するのに役立ちます。キー配列内の要素は、(DOM) 要素に安定した ID を与えるように割り当てる必要があります。キーを選択してください。最良の方法は、リスト項目を一意に識別する文字列を使用することです。安定した ID がない場合は、データ内の ID をキーとして使用することがよくあります。レンダリングされたアイテムで使用する場合、アイテムのインデックスをキーとして使用してアイテムをレンダリングできますが、アイテムを並べ替えることができる場合、再レンダリングが遅くなる可能性があるため、これはお勧めできません。 </p> <h4 id="コンストラクター内で-super-props-を呼び出す目的は何ですか">(コンストラクター内で) super(props) を呼び出す目的は何ですか。</h4> <p>super() が呼び出される前に、サブクラスはこれを使用できません。ES2015 では、サブクラスはメソッド内で super() を呼び出す必要があります。コンストラクタ。 props を super() に渡す理由は、コンストラクター (サブクラス内) での this.props へのアクセスを容易にするためです。 </p> <h4 id="JSXとは">JSXとは</h4> <p>JSXはJavaScript構文の構文拡張であり、JavaScriptのすべての機能を備えています。 JSX プロダクションの反応「要素」では、JavaScript 式を中括弧で囲んで JSX に埋め込むことができます。コンパイルが完了すると、JSX 式は通常の式になります。 JavaScript オブジェクト。つまり、if ステートメントおよび for ループ内で JSX を使用し、それを変数に割り当て、引数として受け入れ、関数から返すことができます。 </p> <h4 id="React-createElement-を使用して次のコードを書き換える方法">React.createElement を使用して次のコードを書き換える方法</h4> <p>質問: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const element = ( <h1 className="greeting"> Hello, rdhub.cn! </h1> );</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>回答: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, rdhub.cn!' );</pre><div class="contentsignin">ログイン後にコピー</div></div> <h4> <code>Children</code> とは</h4> <p>JSX 式では、開始タグ (<a> など) と終了タグ (</a> など) の間のコンテンツは、特別な属性として props.children に自動的に渡されます。そのコンポーネント。 </p> <p>このプロパティには、React.Children.map、React.Children.forEach、React.Children.count、React.Children.only、React.Children.toArray など、多くのメソッドが使用できます。 </p> <h4 id="React-では-state-とは何ですか">React では、state とは何ですか</h4> <p>State は props に似ていますが、プライベートであり、コンポーネント自体によって完全に制御されます。状態は本質的に、データを保持し、コンポーネントがどのようにレンダリングされるかを決定するオブジェクトです。 </p> <h4 id="create-react-app-の依存関係から抜け出す理由は何ですか">create-react-app の依存関係から抜け出す理由は何ですか。</h4> <p>Webpack または Babel のプリセットを構成したいとき。 </p> <h4 id="redux-とは">redux とは</h4> <p>Redux の基本的な考え方は、アプリケーション全体の状態を 1 つのストアに保持することです。ストアは単純なJavaScriptですオブジェクトであり、アプリケーションの状態を変更する唯一の方法は、アプリケーション内でアクションをトリガーし、これらのアクションのリデューサーを作成して変更することです。州。状態変換全体はリデューサー内で行われるため、副作用はありません。 </p> <h4 id="Redux-では-store-とは何ですか">Redux では、store とは何ですか</h4> <p>Store は、アプリケーション全体の状態を保存する JavaScript オブジェクトです。同時に、Store は次の責任も負います。 </p> <p>getState() を介して状態へのアクセスを許可する </p> <p>dispatch(action) を介して状態を実行する </p> <p>subscribe( を介してリスナーを登録する） listener) </p> <p>subscribe(listener) によって返された関数を通じてリスナーのログアウトを処理します</p> <h4 id="action-とは">action とは</h4> <p>Actions は純粋な JavaScript オブジェクトであり、type 属性が必要です。実行中であることを示すアクションのタイプ。基本的に、アクションはアプリケーションからストアにデータを送信するペイロードです。 </p> <h4 id="reducer-とは">reducer とは</h4> <p>reducer は、前の状態とアクションをパラメータとして受け取り、次の状態を返す純粋な関数です。 </p> <h4 id="Redux-Thunk-の役割とは">Redux Thunk の役割とは</h4> <p>Redux thunk は、アクションの代わりに関数を返すアクションクリエーターを作成できるミドルウェアです。特定の条件が満たされた場合、サンクを使用してアクション (ディスパッチ) のディスパッチを遅延させることができ、非同期アクション (ディスパッチ) のディスパッチを処理できます。 </p> <h4 id="純粋関数とは何ですか">純粋関数とは何ですか?</h4> <p>純粋関数とは、スコープ外の変数に依存せず、その状態を変更しない関数です。これは、純粋関数であることも意味します。パラメータは常に同じ結果を返します。 </p> <p class="comments-box-content"></p><p>以上が(コレクション) React でのよくある面接の質問の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットAIツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>リアルなヌード写真を作成する AI 搭載アプリ</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>写真から衣服を削除するオンライン AI ツール。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>脱衣画像を無料で</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI衣類リムーバー</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796789525.html" title="Windows11 KB5054979の新しいものと更新の問題を修正する方法" class="phpgenera_Details_mainR4_bottom_title">Windows11 KB5054979の新しいものと更新の問題を修正する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796785857.html" title="Atomfallのクレーンコントロールキーカードを見つける場所" class="phpgenera_Details_mainR4_bottom_title">Atomfallのクレーンコントロールキーカードを見つける場所</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796783009.html" title="アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法" class="phpgenera_Details_mainR4_bottom_title">アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 か月前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796784440.html" title="<🎜>：Dead Rails-すべての課題を完了する方法" class="phpgenera_Details_mainR4_bottom_title"><🎜>：Dead Rails-すべての課題を完了する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/article.html">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title"> <h3>メモ帳++7.3.1</h3> </a> <p>使いやすく無料のコードエディター</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 中国語版</h3> </a> <p>中国語版、とても使いやすい</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title"> <h3>ゼンドスタジオ 13.0.1</h3> </a> <p>強力な PHP 統合開発環境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title"> <h3>ドリームウィーバー CS6</h3> </a> <p>ビジュアル Web 開発ツール</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神レベルのコード編集ソフト（SublimeText3）</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>ホットトピック</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7638</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1391</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/steamdzhmcssmgs" title="Steamのアカウント名の形式は何ですか" class="phpgenera_Details_mainR4_bottom_title">Steamのアカウント名の形式は何ですか</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>90</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/winactivationkeyper" title="Win11 Activation Key Permanent" class="phpgenera_Details_mainR4_bottom_title">Win11 Activation Key Permanent</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>71</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/newyorktimesdailybrief" title="NYTの接続はヒントと回答です" class="phpgenera_Details_mainR4_bottom_title">NYTの接続はヒントと回答です</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>32</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>150</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/faq/zt">もっと見る</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/499503.html" title="Reactの親コンポーネントで子コンポーネントのメソッドを呼び出す方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63aacf4b62050134.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Reactの親コンポーネントで子コンポーネントのメソッドを呼び出す方法" /> </a> <a href="https://www.php.cn/ja/faq/499503.html" title="Reactの親コンポーネントで子コンポーネントのメソッドを呼び出す方法" class="phphistorical_Version2_mids_title">Reactの親コンポーネントで子コンポーネントのメソッドを呼び出す方法</a> <span class="Articlelist_txts_time">Dec 27, 2022 pm 07:01 PM</span> <p class="Articlelist_txts_p">呼び出しメソッド: 1. クラスコンポーネントの呼び出しは、React.createRef()、ref または props のカスタム onRef 属性の関数宣言を使用して実装できます; 2. 関数コンポーネントおよびフックコンポーネントの呼び出しは、useImperativeHandle または forwardRef を使用して実装できます。子コンポーネントの ref が実装されています。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/522909.html" title="React のカスタムフックについての深い理解" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/644111dd49e1c260.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React のカスタムフックについての深い理解" /> </a> <a href="https://www.php.cn/ja/faq/522909.html" title="React のカスタムフックについての深い理解" class="phphistorical_Version2_mids_title">React のカスタムフックについての深い理解</a> <span class="Articlelist_txts_time">Apr 20, 2023 pm 06:22 PM</span> <p class="Articlelist_txts_p">React カスタムフックは、コンポーネントロジックを再利用可能な関数にカプセル化する方法であり、クラスを作成せずに状態ロジックを再利用する方法を提供します。この記事では、カプセル化フックをカスタマイズする方法を詳しく紹介します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/505907.html" title="React ソースコードをデバッグするにはどうすればよいですか?複数のツールを使用したデバッグ方法の紹介" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202303/31/2023033118531636061.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React ソースコードをデバッグするにはどうすればよいですか?複数のツールを使用したデバッグ方法の紹介" /> </a> <a href="https://www.php.cn/ja/faq/505907.html" title="React ソースコードをデバッグするにはどうすればよいですか?複数のツールを使用したデバッグ方法の紹介" class="phphistorical_Version2_mids_title">React ソースコードをデバッグするにはどうすればよいですか?複数のツールを使用したデバッグ方法の紹介</a> <span class="Articlelist_txts_time">Mar 31, 2023 pm 06:54 PM</span> <p class="Articlelist_txts_p">React ソースコードをデバッグするにはどうすればよいですか?次の記事では、さまざまなツールで React のソースコードをデバッグする方法について説明し、コントリビューター、create-react-app、vite プロジェクトで React の実際のソースコードをデバッグする方法を紹介します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/500727.html" title="React がアプリ構築の第一選択肢として Vite を使用しない理由" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63dce459ae0cc658.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React がアプリ構築の第一選択肢として Vite を使用しない理由" /> </a> <a href="https://www.php.cn/ja/faq/500727.html" title="React がアプリ構築の第一選択肢として Vite を使用しない理由" class="phphistorical_Version2_mids_title">React がアプリ構築の第一選択肢として Vite を使用しない理由</a> <span class="Articlelist_txts_time">Feb 03, 2023 pm 06:41 PM</span> <p class="Articlelist_txts_p">React はなぜ Vite をアプリケーション構築の第一の選択肢として使用しないのでしょうか?次の記事では、React が Vite をデフォルトの推奨事項として推奨しない理由について説明します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/499833.html" title="Reactでdivの高さを設定する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202301/06/2023010610162061324.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Reactでdivの高さを設定する方法" /> </a> <a href="https://www.php.cn/ja/faq/499833.html" title="Reactでdivの高さを設定する方法" class="phphistorical_Version2_mids_title">Reactでdivの高さを設定する方法</a> <span class="Articlelist_txts_time">Jan 06, 2023 am 10:19 AM</span> <p class="Articlelist_txts_p">React で div の高さを設定する方法: 1. CSS を通じて div の高さを実装します; 2. ステートでオブジェクト C を宣言し、オブジェクトに変更ボタンのスタイルを格納し、A を取得して C の "marginTop" をリセットします. それがキャンです。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/497381.html" title="7 つの優れた実用的な React コンポーネントライブラリ (プレッシャーの下で共有)" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/6364fe2a176ea129.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="7 つの優れた実用的な React コンポーネントライブラリ (プレッシャーの下で共有)" /> </a> <a href="https://www.php.cn/ja/faq/497381.html" title="7 つの優れた実用的な React コンポーネントライブラリ (プレッシャーの下で共有)" class="phphistorical_Version2_mids_title">7 つの優れた実用的な React コンポーネントライブラリ (プレッシャーの下で共有)</a> <span class="Articlelist_txts_time">Nov 04, 2022 pm 08:00 PM</span> <p class="Articlelist_txts_p">この記事では、日常の開発で頻繁に使用される、優れた実用的な React コンポーネントライブラリを 7 つ紹介します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/499703.html" title="よりクリーンな React コードを書くための 10 の実践的なヒント" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63b41d0410955723.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="よりクリーンな React コードを書くための 10 の実践的なヒント" /> </a> <a href="https://www.php.cn/ja/faq/499703.html" title="よりクリーンな React コードを書くための 10 の実践的なヒント" class="phphistorical_Version2_mids_title">よりクリーンな React コードを書くための 10 の実践的なヒント</a> <span class="Articlelist_txts_time">Jan 03, 2023 pm 08:18 PM</span> <p class="Articlelist_txts_p">この記事では、よりシンプルな React コードを記述するための 10 の実践的なヒントを紹介します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/498796.html" title="Vuex と Pinia の設計と実装の違いについて話しましょう" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/639069734180d774.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Vuex と Pinia の設計と実装の違いについて話しましょう" /> </a> <a href="https://www.php.cn/ja/faq/498796.html" title="Vuex と Pinia の設計と実装の違いについて話しましょう" class="phphistorical_Version2_mids_title">Vuex と Pinia の設計と実装の違いについて話しましょう</a> <span class="Articlelist_txts_time">Dec 07, 2022 pm 06:24 PM</span> <p class="Articlelist_txts_p">フロントエンドプロジェクトを開発する場合、状態管理は常に避けられないトピックですが、Vue および React フレームワーク自体が、この問題を解決するための機能をいくつか提供しています。ただし、大規模なアプリケーションを開発する場合は、より標準化された完全な操作ログ、開発者ツールに統合されたタイムトラベル機能、サーバー側レンダリングなどの必要性など、他の考慮事項も多くあります。この記事では、Vue フレームワークを例として、2 つの状態管理ツールである Vuex と Pinia の設計と実装の違いを紹介します。</p> </div> </div> <a href="https://www.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ja/about/us.html">私たちについて</a> <a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a> <a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745297741"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>

(コレクション) React でのよくある面接の質問の紹介

React の仕組み

React を使用する利点は何ですか。

プレゼンテーション コンポーネントとコンテナ コンポーネント

クラス コンポーネントと機能コンポーネントの違いは何ですか。

(コンポーネントの) 状態とプロパティ (props) の違いは何ですか。

(コンポーネント) ライフサイクル メソッドの違いを指摘します

Ajax リクエストは React コンポーネントのどこで開始する必要がありますか

制御コンポーネントとは

プレゼンテーションコンポーネントとコンテナコンポーネント

クラスコンポーネントと機能コンポーネントの違いは何ですか。

(コンポーネント) ライフサイクルメソッドの違いを指摘します