反応に関する詳しい知識

　　用react一年多了.一直是在别人的影子下写的代码,他们也确实都是大神级的人物,不过,小菜鸟也有小菜鸟的思想~这不,今天就在重温一遍react!记一些零碎的知识点~所有的这些均参考于  

　　react官方文档 facebook.github.io/react/docs/events.html#supported-events

　　1　　var names = ['fr','de']

　　　ReactDOM.render(

　　　　(1)

你好,学长

　　　　document.getElementById('h1')

 

　　　　(2)

　　　　　　{

　　　　　　　　names.map(function(name){

　　　　　　　　　　return

Hello {name}

　　　　　　　　})

　　　　　　}

　　　　　

document.getElementById('h1')

)

ReactDom.renderはReactの基本構文です 用途:テンプレートをHTMLに変換し、指定したDOMノードを挿入します

reactの特殊な構文: JSX 上記の例ではMixingが可能です。 HTML と JavaScript の基本的な文法規則: 1. <> で始まる HTML タグに遭遇すると、HTML 規則を使用して解析されます。 {} で始まるコード ブロックに遭遇すると、それは HTML 規則を使用して解析されます。 JavaScript

コンポーネント: React では、通常の HTML タグを挿入するのと同じように、コードをコンポーネントにカプセル化して、このコンポーネントを Web ページに挿入できます。コンポーネント クラスの生成には React.createClass が使用されます。コンポーネント クラスは 1 つだけを持つことができます。これは間違っています。2 つのタグの一番外側に

タグが含まれている必要があります

コンポーネントの使用方法は、HTML タグのプロパティと同じです。注意すべき点が 1 つあります。class と for は JavaScript の予約語であるため、class と for 属性を変更する必要があります

。コンポーネントの属性は 1 対 1 で表されますが、this.props.children プロパティには 3 つの可能性があります。子ノードがない場合は、undefine を意味します。子ノードが 1 つである場合、それはオブジェクトを意味します。複数の子ノードがある場合、それは配列を意味します。属性: コンポーネント インスタンスのプロパティが要件を満たしているかどうかを確認します。 は、次のような属性タイプを定義するために使用される構成オブジェクトです。 実際の DOM ノードを取得します: this.refs.[refName]

を使用します。 this.state と this.props はどちらもコンポーネントの特性を記述します。違いは、this.state は変更できる特性を指しますが、this.props は一度定義すると変更できない特性を指します

react ライフサイクル:

。 -[] React コンポーネントのライフサイクルは 3 つの部分に分かれています: 1 実際の DOM が挿入されました: マウント (インスタンス化)、2 更新中: 再レンダリング中 (存在期間) 3 本物の DOm が削除されました (破棄) & クリーンアップ期間)、具体的なシーケンスは次のとおりです propTypes

- [注] サーバー側のレンダリング プロセス中には、componentDidMount は呼び出されません。

-[解決策] 各サイクルの詳細な説明:

getDefaultProps

各コンポーネントインスタンスに対して、このメソッドはコンポーネントクラスの後続のすべてのアプリケーションで一度だけ呼び出され、返されるメソッドは再度呼び出されません。オブジェクトを使用して、デフォルトの props (プロパティの略語) 値を設定できます。

getInitialState

このメソッドは

、各インスタンスの状態を初期化するために一度だけ呼び出されます。このメソッドでは、コンポーネントのプロパティにアクセスできます。各 React コンポーネントには独自の状態があり、状態がコンポーネント内にのみ存在する点でプロップとは異なりますが、プロップはすべてのインスタンス間で共有されます。 getInitialState と getDefaultPops の呼び出しには違いがあります。getDefaultPops はコンポーネント クラスに対して 1 回だけ呼び出され、このクラスの後続のアプリケーションは呼び出されません。一方、getInitialState はコンポーネント インスタンスごとに 1 回だけ呼び出されます。

状態が変更されるたびにコンポーネントは再レンダリングされ、インスタンス化後、コンポーネントは状態を通じて更新され、次のメソッドが順番に呼び出されます:

1、 shouldComponentUpdate

2、componentWillUpdate

3 、render

4、componentDidUpdateただし、

直接変更しないでください。 this.state は this.setState メソッドを通じて変更する必要があります。

ComponentWillMount

このメソッドは最初のレンダリングの前に呼び出され、render メソッドを呼び出す前に状態を変更する最後の機会でもあります。

render

このメソッドは、コンポーネントの出力を表す仮想 DOM を作成します。コンポーネントの場合、必須のメソッドは render メソッドのみです。 render メソッドは次の点を満たす必要があります:

this.props と this.state を通じてのみデータにアクセスできます (変更できません)

null、false、または任意の React コンポーネントを返すことができます

1 つだけトップレベルはコンポーネントとして表示できます。要素のセットを返すことはできません

コンポーネントの状態を変更することはできません

1. DOMの出力を変更することはできません

2. renderメソッドによって返された結果は実際のDOMではありません要素ですが、DOM ツリー構造オブジェクトに似た仮想表現です。これが、react が非常に効率的である理由です。

componentDidMount

このメソッドはサーバー側のレンダリングプロセス中には呼び出されません。このメソッドが呼び出されると、実際の DOM がレンダリングされます。このメソッドの this.getDOMNode() を通じて実際の DOM にアクセスできます (ReactDOM.findDOMNode())。コンポーネントは実際の DOM ノードではなく、仮想 DOM と呼ばれるメモリ内に存在するデータ構造であるためです。ドキュメントに挿入された場合にのみ、実際の DOM になります。コンポーネントから実際の DOM ノードを取得する必要がある場合は、<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/40fe3b2de3f832eec8ee102dfc0e43cc-3.png" class="lazy" alt=""><code>this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性：如:

　　　　　　componentWillReceiveProps

　　　　　　　　组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

　　　　　　shouldComponentUpdate

　　　　　　　　如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false

componentWillReceiveProps

コンポーネントの props プロパティは親コンポーネントを通じて変更できます。このとき、将来的にはcomponentWillReceivePropsが呼び出されます。このメソッドの状態を更新して、render メソッドをトリガーしてコンポーネントを再レンダリングできます。

shouldComponentUpdate

コンポーネントのプロパティや状態の変更に再レンダリングが必要ないことが確実な場合は、このメソッドで false を返すことでコンポーネントの再レンダリングを防ぐことができます。 `false を返すと、再レンダリングは必要なくなり、render および後続のcomponentWillUpdate メソッドとcomponentDidUpdate メソッドが実行されます。

このメソッドはオプションであり、ほとんどの場合開発では使用されません。 componentwillupdate 'in forward in / >>この方法は、コンポーネントが新しい小道具または状態を受信し、再レンダリングしようとしている場合、componentwillupdate（object nextprops、object nextstate）が呼び出されます。 この点に関しては更新しないように注意してください。

ComponentDidUpdate

このメソッドは、コンポーネントが再レンダリングされた後、componentDidMount と似ています。ここから DOM にアクセスして変更できます。
🎜 componentWillUnmount🎜🎜🎜 私たちin in in ininging in on in in in では、このコンポーネントを DOM からアンロードしてから破棄する必要があります。この時点で、追加されたすべてのクリーンアップと破棄の作業を完了するために、componentWillUnmout が実行されます。このメソッドで作成したタイマーやイベント リスナーなどを再インストールする必要があります。 🎜

以上が反応に関する詳しい知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。