反応についてどのような知識を学べばよいですか? React の知識ポイントの概要 (完全な例付き)
この記事では主にreactについての学習を紹介し、reactについての知識ポイントをまとめています
正式にreactの学習を始めましょう
1. 大文字の場合、小文字の場合は、DOM 自体の要素名として扱われます。カスタム コンポーネント名の最初の文字が小文字の場合、エラーは報告されませんが、表示されません。
2. カスタム コンポーネントの戻りの最外層に存在できるノードは 1 つだけです。
3. HTML内に{}内の記述はできませんが、評価式は記述できます。ただし、ステートメントを関数内に記述し、その関数を {} で呼び出すことはできます。
4. 関数名とラベル名はキャメルケースで付けられます。
5. htmlFor と className を使用します。例:
6. スタイルの記述: jsx では var style = {color:"red",backgroundColor:"blue"} を使用できます。次に、カスタム タグに style={style} を追加します。キャメルケース表記を使用してください。
7. 非 DOM 属性:
a. 危険なほど SetInnerHTML: JSX に直接 HTML コードを挿入します
b. ref: 親コンポーネントが子コンポーネントを参照します
c. レンダリングのパフォーマンスを向上させます。 diff アルゴリズム
8. コンポーネントの各ライフサイクルで実行される関数: a. 初期化。
b.ランニング。
c. 破壊する。
9. 属性の使用法:
a,
b,
var props = {
one:"123",
two:"456"
}
<HelloWorld {...props}/> //展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body);a.setProps({name:" Tim"} ; 10. 状態の使用法:
var HelloWorld = React.createClass({ render:function(){ return <p>Hello,{this.props.name||"world"}</p> } }); var HelloUniverse = React.createClass({ handleChange:function(e){ this.setState({ name:e.target.value }); }, getInitialState:function(){ return { name:'', } }, render:function(){ return <p>
<HelloWorld {...this.state}/>
<input type="text" onChange={this.handleChange} />
</p> } }); var a = ReactDOM.render(<HelloUniverse/>
,document.getElementById("root"));11. 属性と状態の類似点と相違点
12. イベント処理関数
13. イベントオブジェクトのプロパティ
14. コンポーネントの共同使用
父と息子の間 共同使用の場合、子コンポーネントを使用して親コンポーネントのメソッドを呼び出すことができます。この目標を達成するために、親コンポーネントは props
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var GenderSelect = React.createClass({ render:function(){ return <select name="gender" onChange={this.props.handleSelect}>
<option value="1">男</option>
<option value="0">女</option>
</select> } }); var SignupForm = React.createClass({ getInitialState:function(){ return { name:'', pwd:'', gender:'', } }, handleChange:function(name,e){ var newState = {} newState[name] = e.target.value; this.setState(newState); }, handleSelect:function(e){ this.setState({gender:e.target.value}); }, render:function(){ console.log(this.state) return <form>
<input type="text" onChange={this.handleChange.bind(this,'name')}/>
<input type="text" onChange={this.handleChange.bind(this,'pwd')}/>
<GenderSelect handleSelect={this.handleSelect}/>
</form> } }); var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
</script>
</body>
</html>を介して子コンポーネントに渡されます (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual 列にアクセスしてください)学習)兄弟コンポーネント これは、子コンポーネント A を親コンポーネントに渡し、親コンポーネントがそれを子コンポーネント B に渡すことで実現できます。
15、mixin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var SetInit = { handleClick:function(e){ console.log(e.target.value); } } var Hello = React.createClass({ //这里命名必须为mixins
mixins:[SetInit], render:function(){ return <input type="button" onClick={this.handleClick} value="123123"/> } }); var a = ReactDOM.render(<Hello />,document.getElementById("root"));
</script>
</body>
</html>利点と欠点:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var BindingMixin = { handleChange:function(name){ var that = this; return function(e){ var news = {}; news[name] = e.target.value; that.setState(news); } } }; var Example = React.createClass({ //这里命名必须为mixins
mixins:[BindingMixin], getInitialState:function(){ return { text:'' } }, render:function(){ return <p>
<input type="text" onChange={this.handleChange('text')} />
<p>{this.state.text}</p>
</p> } }); var a = ReactDOM.render(<Example />,document.getElementById("root"));
</script>
</body>
</html>16、制御可能なコンポーネントと制御不可能なコンポーネント制御可能なコンポーネント
制御可能なコンポーネントとは、次の値です。 value は、value={this.state.value} のようにハードコーディングされていません。
制御不能はその逆です。
できるだけ制御可能なコンポーネントを使用するようにしてください
発生した問題:
1. wepack.config.js 設定項目では、モジュール内のローダーには複数の設定項目があるため、ローダーである必要がありますが、私が書いたものははloaderであるため、後続の設定項目が有効にならず、多くのコンパイルの問題が発生しました。 。 。
2. コンポーネントのレンダリング内の return タグの場合、
がと書かれている場合、タグの最後に / を入力するのを忘れてください。 React はこれを 2 つの p タグとして認識します。埋め込まれた次の内容を報告します: のように、レンダリング内のペアになっていないタグはすべて閉じられている必要があります。埋め込み:
4 に対応する JSX 終了タグが必要です。非常に興味深いことです。特定の関数で特定の属性を setState した場合、この属性をすぐに出力すると正しい結果が得られません。正しい結果は、componentDidUpdate 関数内にあります。つまり、コンポーネントが更新されるまで待ってから出力します。
5. 子コンポーネントの prop が親コンポーネントで更新される場合、この prop を getInitialState 関数にプロパティとして入れないでください。prop が更新されても、子コンポーネントは状態のプロパティを更新しません。 （その中の11の表を参照）。
6. es6 構文を使用する、つまり React.Component を継承する方法を使用してコンポーネントをビルドする場合、getInitialState() 関数は使用できず、警告 Warning: getInitialState was generated on TodoApp, a plain JavaScript classこれは、React.createClass を使用して作成されたクラスでのみサポートされます。 代わりに?
解決策: コンストラクターをセットアップします
constructor(props){
super(props);
this.state = {
example:'example',
}
}この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
React ユーザー マニュアルの列にアクセスして学習してください)。以下のメッセージ。
以上が反応についてどのような知識を学べばよいですか? React の知識ポイントの概要 (完全な例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7684
15
1639
14
1393
52
1287
25
1229
29
React と WebSocket を使用してリアルタイム チャット アプリを構築する方法
Sep 26, 2023 pm 07:46 PM
React と WebSocket を使用してリアルタイム チャット アプリケーションを構築する方法 はじめに: インターネットの急速な発展に伴い、リアルタイム コミュニケーションがますます注目を集めています。ライブチャット アプリは、現代の社会生活や仕事生活に不可欠な部分になっています。この記事では、React と WebSocket を使用して簡単なリアルタイム チャット アプリケーションを構築する方法と、具体的なコード例を紹介します。 1. 技術的な準備 リアルタイム チャット アプリケーションの構築を開始する前に、次のテクノロジとツールを準備する必要があります。 React: 構築用の 1 つ
React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法
Sep 28, 2023 am 10:48 AM
React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です 今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンド コードとバックエンド コードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。
React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法
Sep 27, 2023 am 11:09 AM
React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 はじめに: インターネットの発展に伴い、Web アプリケーションのニーズはますます多様化および複雑化しています。使いやすさとパフォーマンスに対するユーザーの要件を満たすために、最新のテクノロジー スタックを使用してネットワーク アプリケーションを構築することがますます重要になっています。 React と Flask は、フロントエンドおよびバックエンド開発用の 2 つの非常に人気のあるフレームワークであり、うまく連携してシンプルで使いやすい Web アプリケーションを構築します。この記事では、React と Flask を活用する方法について詳しく説明します。
React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法
Sep 28, 2023 pm 08:24 PM
React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法 はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージング ミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージング アプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:
React コード デバッグ ガイド: フロントエンドのバグをすばやく見つけて解決する方法
Sep 26, 2023 pm 02:25 PM
React コード デバッグ ガイド: フロントエンドのバグをすばやく見つけて解決する方法 はじめに: React アプリケーションを開発するとき、アプリケーションをクラッシュさせたり、不正な動作を引き起こしたりする可能性のあるさまざまなバグに遭遇することがよくあります。したがって、デバッグ スキルを習得することは、すべての React 開発者にとって不可欠な能力です。この記事では、フロントエンドのバグを見つけて解決するための実践的なテクニックをいくつか紹介し、読者が React アプリケーションのバグをすばやく見つけて解決できるようにする具体的なコード例を示します。 1. デバッグツールの選択: In Re
React Router ユーザーガイド: フロントエンドルーティング制御の実装方法
Sep 29, 2023 pm 05:45 PM
ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法 シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティング ライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンド ルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です
React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法
Sep 26, 2023 pm 06:12 PM
React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法 はじめに: 今日の情報爆発の時代において、データ分析はさまざまな業界で不可欠なリンクとなっています。中でも、高速かつ効率的なデータ分析アプリケーションを構築することは、多くの企業や個人が追求する目標となっています。この記事では、React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法を紹介し、詳細なコード例を示します。 1. 概要 React はビルドするためのツールです
React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法
Sep 27, 2023 pm 02:25 PM
React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法 はじめに: ビッグ データとリアルタイム データ処理の台頭により、リアルタイム データ処理アプリケーションの構築が多くの開発者の追求となっています。人気のあるフロントエンド フレームワークである React と、高性能分散メッセージング システムである Apache Kafka を組み合わせることで、リアルタイム データ処理アプリケーションを構築できます。この記事では、React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法を紹介します。
