非ドム屬性?
dangerouslySetInnerHTML,ref,key
非 dom 標準屬性、つまり dom 標準には指定された屬性がありません。上記のように、React では 3 つの非 dom 屬性が導(dǎo)入されています。
dangerouslySetInnerHTML: 文字通り、內(nèi)部 HTML を危険に設(shè)定するこの屬性の機能は、HTML コードを jsx に直接挿入することです。 HTML コードを挿入するためにこの屬性を使用するのはなぜですか?コードを書くときに直接書くのではなく？コードを記述するときに、どのコードを挿入するかを確認できないことがあります。これは、HTML コードのこの部分が動的に生成されていることを意味します。つまり、なぜこの動作が危険なのかというと、クロスサイト攻撃という言葉がありますが、その理由を例に挙げてみましょう。ページに表示されるコンテンツがあり、このコンテンツはユーザーの入力から取得されます。ユーザーの入力には js コードや html コードなどのコードが含まれているとします。テストせずに直接使用する場合は、この dom をページに挿入します。その後、他の人がそのページにアクセスすると、その人が書いたコードが実行されてしまい、ユーザーの意図が判斷できないため、トロイの木馬への接続を追加するなど、非常に危険なコードを書き込む可能性があります。これは非常に危険ですが、動的にコードを記述する必要があるため、react は依然としてこの屬性を提供していますが、この屬性が非常に危険であることが明確に示されています。 , なので使用しないようにしましょう。
ref: 親コンポーネントが子コンポーネントを參照するとき、親コンポーネントが子コンポーネントを參照するときにネストを使用することがよくあります。実際に使用する場合、ref は親コンポーネント內(nèi)に多くの參照を保持しており、各參照は対応する子コンポーネントを參照するため、親コンポーネント內(nèi)のこれらの參照を通じて子コンポーネントを操作できます。親コンポーネントの親コンポーネントを操作できないのはなぜですか?これは実際にはコードの問題ではなく、設(shè)計の問題です。react でコンポーネントを使用する目的は、各コンポーネントが獨自の機能とロジックを考慮するだけでよく、誰が使用しているかを気にする必要がありません。したがって、コンポーネントはそれ自身の親コンポーネントを參照する必要がありません。親コンポーネントとコンポーネント間の対話は、後で説明する屬性の転送によって実現(xiàn)されます。ただし、このような転送は一方向であり、つまり、屬性は常に上から下に転送され、下のコンポーネントは上のコンポーネントを制御しません。これは、ロジックを明確にするためです。
重要: レンダリング パフォーマンスを向上させます。 React の特徴の 1 つは、手動による DOM 操作を削除し、完全に自動で実裝するため、パフォーマンスが優(yōu)れていることです。ただし、自動実裝では、一連のアルゴリズムを使用する必要があることがわかります。ページ変更に対応する変更を反映するためにページを効率的に変更する方法を決定するアルゴリズム。このアルゴリズムは diff と呼ばれることが多く、これは、2 つの狀態(tài)の差を計算することを意味します。
反応差分アルゴリズム
React diff アルゴリズムのフローチャート
まず第一に、今比較しているのは 2 つのコンポーネントであることを明確にする必要があります。そのため、2 つのコンポーネントがどのように比較されるかを理解している限り、他の構(gòu)造でも比較できます。比較のためにコンポーネントに分割して使用します。
一番左側(cè)が開始です。開始後の最初の判斷は、ノードが同じであるか、div と div が同じであるか、div と p が異なるか、またはカスタマイズされた HelloMessage と HelloMessage が同じであるかどうかです。 HelloWorld と同じコンポーネントではありません。ノードが同じであれば、react は古いノードを直接破棄し、新しいノードを生成します。 2 つのノードが異なる場合、その內(nèi)容は大きく異なります。ノードが異なる場合は、比較を直接終了し、新しいノードを生成します。ノードが同じである場合、次のステップは、これらのポイントがカスタム ノードであるか dom の標準ノードであるかを判斷することです。 divs または HelloWorld がカスタム ノードではなく、標準ノードである場合、react が実行する必要がある次のステップは、クラス、ID などの 2 つのノードの屬性を比較することです。屬性がまったく同じである場合は、2 つのノードが同じであることを意味し、比較は終了します。たとえば、新しい屬性がある場合は、異なる屬性を書き留めて変更を適用します。新しい屬性、欠落している屬性が 1 つある場合は、次のように屬性を削除します。つまり、react は古いノードを削除せず、そのノード上でのみ操作します。カスタム ノードの場合、react はそれを再レンダリングします。コンポーネントには多くの狀態(tài)があるため、新しいコンポーネントは古いコンポーネントの狀態(tài)にすぎない可能性があります。 Reac 新しい狀態(tài)が古いコンポーネントに渡され、コンポーネントのレンダリング結(jié)果が比較されて変更が加えられます。つまり、react はコンポーネントを再生成しませんが、古いコンポーネントに変更を加えます。これがプロセス全體の diff アルゴリズムです。では、鍵は何に使われるのでしょうか？キーの役割は主にノードの比較に反映されます。つまり、親ノードに複數(shù)の子ノードがあるとします。キーが存在せずに変更を加えると、React は愚かな結(jié)果を比較します。たとえば、変更前はノード 1 のみでした。変更後、ノード 2 を挿入すると、ノード 2 とノード 1 になります。その後、react によって実行される操作は、ノード 1 を削除し、ノードを追加することです。 2、ノード 1 を追加します。つまり、react は、新しい狀態(tài)のノード 1 がその狀態(tài)のノード 1 と同じかどうかを判斷できないため、たとえ同じであっても、異なるノードをすべて削除することしかできません。これはパフォーマンスの問題を引き起こすため、キーを?qū)毪工肽康膜稀⒏鳐惟`ドに一意の識別子を追加することです。このようにして、React は、どのノードが元のノードでどのノードが新しく追加されたノードであるかを知ることができます。先ほどの例では、ノード 1 がノード 2 になります。 1. この時點で、react はノード 2 を挿入する 1 つの操作だけを行う必要があります。ノード 1 のキーが同じであるため、ノード 1 は同じであることを意味します。ノードになり、変化はありません。
この原則を理解すると、React コンポーネントを作成する際にどのようなインスピレーションが得られますか?
最初のポイントは、2 つのコンポーネントが非常に似ている場合は、それらを 1 つのコンポーネントとして記述してみるということです。これは、そのプロセスで、たとえその內(nèi)容が非常に似ていたとしても、2 つの異なるコンポーネントが確実に再生成されることがわかったためです。 2 番目の発見は、同様のリストを使用して要素を表示する場合、要素にキーを追加することで効率が大幅に向上し、不必要なパフォーマンスの低下を回避できるということです。
非 dom 屬性を使用するには?
危険なことに、instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f09",
};
var rawHTML={
__html:"<h1>I am inner HTML</h1>"
};
var HelloWorld=React.createClass({
render: function(){
return <p>Hello,world</p>
}
});
React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>,document.body);
</script>
</body>
</html>ref インスタンスでは、參照を通じて取得するものは dom ノード自體ではないことに注意してください。つまり、テキストの設(shè)定などの dom 間の操作を?qū)g行できません。これは不可能です。取得できるのは単なる仮想 dom ノード。これは、react によって表示される dom ノードです。実際の dom ノードを取得したい場合は、後で説明しますが、react はこれを行うことを推奨しません。特殊な狀況では dom ノードを操作する必要がありますが、それ以外の場合は、react が操作に役立ちます
この例は完了していません。後で説明していきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f09",
};
var rawHTML={
__html:"<h1>I am inner HTML</h1>"
};
var HelloWorld=React.createClass({
render: function(){
this.refs.childp
return <p ref="childp">Hello,world</p>
}
});
React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>,document.body);
</script>
</body>
</html>Key インスタンス: キーの値は各コンポーネント內(nèi)で異なる必要があることに注意してください。キーはコンポーネント內(nèi)にあることに注意してください。 2 つのコンポーネント間にはそのような制限はありません。
次の 2 つの點に注意してください: 1. 類似したコンテンツを持つコンポーネントを同じコンポーネントにマージするようにしてください。 2. リスト タイプの要素には一意のキーを追加する必要があります。これらの 2 つの點を?qū)g行することで、多くのパフォーマンスの問題を回避できます。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
React vs. Vue：Netflixはどのフレームワークを使用していますか？
Apr 14, 2025 am 12:19 AM
netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.
Reactのエコシステム：ライブラリ、ツール、およびベストプラクティス
Apr 18, 2025 am 12:23 AM
Reactエコシステムには、狀態(tài)管理ライブラリ（Reduxなど）、ルーティングライブラリ（Reactrouterなど）、UIコンポーネントライブラリ（材料-UIなど）、テストツール（JESTなど）、およびビルディングツール（Webpackなど）が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質(zhì)と開発効率を向上させるのを支援するために協(xié)力します。
Netflixのフロントエンド：React（またはVue）の例とアプリケーション
Apr 16, 2025 am 12:08 AM
Netflixは、Reactをフロントエンドフレームワークとして使用します。 1）Reactのコンポーネント開発モデルと強力なエコシステムが、Netflixがそれを選択した主な理由です。 2）コンポーネント化により、Netflixは複雑なインターフェイスをビデオプレーヤー、推奨リスト、ユーザーコメントなどの管理可能なチャンクに分割します。 3）Reactの仮想DOMおよびコンポーネントライフサイクルは、レンダリング効率とユーザーインタラクション管理を最適化します。
React：Web開発のためのJavaScriptライブラリの力
Apr 18, 2025 am 12:25 AM
Reactは、メタがユーザーインターフェイスを構(gòu)築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと狀態(tài)管理：Reactは、コンポーネント（関數(shù)またはクラス）とフック（UseStateなど）を介して狀態(tài)を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化：仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック：フック（使用効果など）は、関數(shù)コンポーネントがライフサイクルを管理し、副作用操作を?qū)g行できるようにします。 4。使用例：基本的なHelloworldコンポーネントから高度なグローバル州管理（USECONTEXTおよび
Reactの未來：Web開発におけるトレンドと革新
Apr 19, 2025 am 12:22 AM
Reactの未來は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統(tǒng)合に焦點を當てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規(guī)模なアプリケーションでは、パフォーマンスの最適化が焦點になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統(tǒng)合されます。
Reactを使用したフロントエンド開発：利點とテクニック
Apr 17, 2025 am 12:25 AM
Reactの利點は、その柔軟性と効率性であり、これは以下に反映されています。1）コンポーネントベースの設(shè)計により、コードの再利用性が向上します。 2）仮想DOMテクノロジーは、特に大量のデータ更新を処理する場合、パフォーマンスを最適化します。 3）リッチエコシステムは、多數(shù)のサードパーティライブラリとツールを提供します。 Reactがどのように機能し、例を使用するかを理解することにより、そのコアコンセプトとベストプラクティスをマスターして、効率的で保守可能なユーザーインターフェイスを構(gòu)築できます。
Netflixのフロントエンドの反応、Vue、および未來
Apr 12, 2025 am 12:12 AM
Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの內(nèi)部ツールと小規(guī)模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。
React vs.バックエンドフレームワーク：比較
Apr 13, 2025 am 12:06 AM
Reactは、ユーザーインターフェイスを構(gòu)築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側(cè)のアプリケーションを構(gòu)築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。
