反応についてどのような知識を学べばよいですか? React の知識ポイントの概要 (完全な例付き)

この記事では主にreactについての学習を紹介し、reactについての知識ポイントをまとめています

正式にreactの学習を始めましょう

1. 大文字の場合、小文字の場合は、DOM 自体の要素名として扱われます。カスタム コンポーネント名の最初の文字が小文字の場合、エラーは報告されませんが、表示されません。

2. カスタム コンポーネントの戻りの最外層に存在できるノードは 1 つだけです。

3. HTML内に{}内の記述はできませんが、評価式は記述できます。ただし、ステートメントを関数内に記述し、その関数を {} で呼び出すことはできます。

4. 関数名とラベル名はキャメルケースで付けられます。

5. htmlFor と className を使用します。例: f48f817659b5fa20e8078bc1b66e32afName8c1ecd4bb896b2264e0711597d40766c

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, ceed8f424836f297f30a31b512ef9e33Hello,{this.props.name||"world"}94b3e26ee717c64999d7867364b1b4a3             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:'',                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee                      3d6f15d111504205b90761d1b885e19b                      3aac1c4d464391a52269ddfd6b12d6a8                  94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a6d3e660a2713293fe38ad9ec2a46721          ,document.getElementById("root"));

11. 属性と状態の類似点と相違点

12. イベント処理関数

13. イベントオブジェクトのプロパティ

14. コンポーネントの共同使用

父と息子の間 共同使用の場合、子コンポーネントを使用して親コンポーネントのメソッドを呼び出すことができます。この目標を達成するために、親コンポーネントは props

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var GenderSelect = React.createClass({             render:function(){                 return 0af7195d42db1dffc2a9a5f85aaa2523
                     859be17dfcd6af2d26185135fb5bd8fc男4afa15d3069109ac30911f04c56f3338
                     302223510126f57919da8bd0aae4999d女4afa15d3069109ac30911f04c56f3338
                 18bb6ffaf0152bbe49cd8a3620346341             }         });         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 ff9c23ada1bcecdd1a0fb5d5a0f18437
                     6bdab968141063db56c595ca92e6ba13
                     b09b07021e9bc4f0c6ac9ccf14b9d325
                     bb6e2821895de793301ee6cda0d13d50
                 f5a47148e367a6035fd7a2faa965022e             }         });         var a = ReactDOM.render(380d7116d918a5f1222d431cfa4f7858,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

親子コンポーネントの相互作用

を介して子コンポーネントに渡されます (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual 列にアクセスしてください)学習)兄弟コンポーネント これは、子コンポーネント A を親コンポーネントに渡し、親コンポーネントがそれを子コンポーネント B に渡すことで実現できます。

15、mixin

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return 84c464c714467c62ed8a7b74d3934788             }         });         var a = ReactDOM.render(b242f848c3983ea1d4adbc5496a81c19,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixinインスタンス

利点と欠点:

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         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 e388a4556c0f65e1904146cc1a846bee
                     5985a603fea88064e808209d741039f4
                     e388a4556c0f65e1904146cc1a846bee{this.state.text}94b3e26ee717c64999d7867364b1b4a3
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a7e09b9eeb1a809bc82d2666b8e06659,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixin

16、制御可能なコンポーネントと制御不可能なコンポーネント制御可能なコンポーネント

制御可能なコンポーネントとは、次の値です。 value は、value={this.state.value} のようにハードコーディングされていません。

制御不能はその逆です。

できるだけ制御可能なコンポーネントを使用するようにしてください

発生した問題:

1. wepack.config.js 設定項目では、モジュール内のローダーには複数の設定項目があるため、ローダーである必要がありますが、私が書いたものははloaderであるため、後続の設定項目が有効にならず、多くのコンパイルの問題が発生しました。 。 。

2. コンポーネントのレンダリング内の return タグの場合、

が e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee と書かれている場合、タグの最後に / を入力するのを忘れてください。 React はこれを 2 つの p タグとして認識します。埋め込まれた次の内容を報告します: 0f0306f9b187f2e363126bc29c8b1420 のように、レンダリング内のペアになっていないタグはすべて閉じられている必要があります。埋め込み:

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 サイトの他の関連記事を参照してください。