reactの基本使用(簡略)

ポイントからreact(判例版なし)を調べてみます.
1、何がreactですか
reactはh 5のフロントエンドフレームであり、このフレームワークでは、画ページを提供し、データを要求し、データをレンダリングする一連のサービスを提供し、react技術スタックを使用して、フロントエンドプロジェクトを行うことができます.
先端領域には3つのフレームがあります.
reactはFacebookの内部にあるjavascriptクラスです.2013年5月にオープンし、ユーザーインターフェースの作成に利用できます.
2、レactを正しく認識する
Reactはmvcフレームではありません.ライブラリだけです.ビューだけです.
Reactは思想で、「learn onece,write anywhere」を提唱して、ウェブ版のReact.jsと元生AppのReact Natvieを分けます.
reactは一般的にreact、react.js、react.nativeを指し、reactは思想であり、react.jsとreact.nativeはreact思想の具体的な体現である.
React.jsはwebappの開発です.
React nativeは、元の生に近いappを開発するためのものです.(isoとandroid原生のアプリ)
react技術スタック:react.js+react-router+redux+es 6+webpack+fetch
Reactの核心思想:
簡単:アプリケーションはどれかの時点で長くなるべきという様子を表すだけで、下のデータが変わったら、Reactは自動的にすべてのユーザーインターフェースの更新を処理します.(データ駆動dom)
宣言式:Reactは声明の範を採用しており、応用を簡単に説明できます.(ラベルを使う形式です.)
Reactの特徴
1、コンポーネント化2、一方向データストリーム3、仮想DOM 4、状態マシン
reactとvueを比較します.
同じ点

はいずれもJavaScriptのUIフレームであり、自分の技術スタック

があります.

コンポーネント化

Virtual DOM

データ駆動DOM

違い点

テンプレートvs JSX

状態管理(state)vsオブジェクト属性

メンテナンスチーム

3、jsx
vueでは、テンプレート文法を使用していますが、reactでは、テンプレート文法は一切ありません.オリジナルのjsまたはjsxを使用してコンポーネントを出力することができます.
JSX=JavaScript+XMLは、Reactコンポーネントの内部にラベルを構築するクラスXML文法です.ReactはJSXを使用しない場合も同じですが、JSXを使用するとコンポーネントの可読性が向上しますので、JSXの使用を推奨します.
Xmlは、extenseble markp langeで、拡張可能なマーク言語です.私たちはreact.jsを使ってweb開発を行う場合、通常はhtmlのラベルを使って構造を構築します.
jsxの本質
任意のhtml元素は、固定されたjsオブジェクト構造で記述できます.
JSXのメリット

は簡単で、XMLに詳しい開発者でも簡単にJSX

を把握できます.

はより直感的で、可読性が高いです.

より語義化する.
分離点に注目して、JSXは綺麗な方法でラベルと業務ロジックとの分離を確保します.
4、reactのリストレンダリング

var book={react,vure,ng};

var newBook=book.map(item=>
{item}
)


   {newBOOK}


 

mapを使うとreactのリストに表示される標準的な書き方です.
5、コンポーネント化
1、コンポーネントとは、＊がカプセル化された独立した機能を有するUIコンポーネントである.
独立機能を備えているということは、通常は以下を含む.

構造

データ(およびデータの変化)

表現

2、コンポーネント化思想
Reactは、UI構成をコンポーネントとして再検討し、UI上の各機能が相対的に独立したモジュールをコンポーネントとして定義し、小さいコンポーネントをグループまたはネストすることによって大きなコンポーネントを構成し、最終的には全体UIの構築を完了することを推奨する.
コンポーネントのメリット:組み合わせ可能、再利用可能、メンテナンス可能
6、コンポーネントを定義する
reactでは、コンポーネントを定義する3つの方法がある.

React.create Class

S 6のクラスキーワードを使って、React.Componentコンポーネント

を継承します.

直接関数を使用して無状態コンポーネントを定義する

7、レンダリングと使用コンポーネント
レンダリングコンポーネントとは、通常、あるコンポーネントをページ内のあるdomノードにマウントすることをいう.
この場合は、ReactDOM.render方法が必要です.
フォーマット:ReactDOM.render(コンポーネントインスタンスオブジェクト、Dmノードをマウント)
その中:
コンポーネントの実例オブジェクトは直接jsxの文法を使ってもいいです.例えば、
Dmノードをマウントするには、元のjs方式を使用してdomノードを取得し、使用できるgetElementById、getElements ByTagName、querySelectorを確保しなければならない.
一つのアプリケーションでは、通常はルートノードが一つしかないので、通常は一度だけReactDOM.renderを呼び出す必要がある.
8、state
reactはステータスマシンで、ステータスはstateで実現します.stateは各要素のビュー状態を確定するために使用され、各Reactコンポーネントは自分のスタントを持つことができます.react開発を行うにあたり、コアは各コンポーネントの状態を確認して管理します.コンポーネントは状態によってレンダリングされ、状態が変化するとコンポーネントが更新されます.
stateの使用

は初期状態を定義し、get Initial State方法

を使用する.

＊＊状態を取得し、this.state.＊状態名

を使用する.

設定状態は、this.set State方法を使用して

です.
A.初期状態を定義する
get Initial Stateを使う方法
この方法では、returnを使ってオブジェクトを返す必要があります.オブジェクトで定義されているのがコンポーネントの状態です.
B.取得状態
this.stateを使用します.ステータス名
現在のコンポーネントでは、現在のコンポーネントのすべての状態をthis.stateを使用して取得します.
C.設定状態
this.set Stateを使う方法
状態を設定するか、または修正状態と呼ぶか、特殊です.
this.set State方法を使用しなければなりません.
状態に値を付け直さなければなりません.
9、props
propsは属性を表し、親子コンポーネント通信を実現するために用いられる.親コンポーネントがサブアセンブリに伝達するものは、データと方法を伝えることができる.
属性のデフォルトを設定します.
FatherコンポーネントはSonコンポーネントを参照する際に、一つのage属性を伝達するので、デフォルトの属性値が上書きされます.
10、コンポーネントのライフサイクル
コンポーネントは作成、レンダリングからアンインストールまでの完全なサイクルは、コンポーネントのライフサイクルです.ライフサイクルのコンポーネントでの具体的な具現は、いくつかのフック関数です.
フック関数とは、開発者にコードを作成できる機会を提供します.ライフサイクルのフック関数を利用して、特定の機能を実現できます.
react.jsではライフサイクルを三つの段階に分けることができます.

マウントフェーズ

更新フェーズ

アンインストールフェーズ

ショルドComponentUpdateは、パフォーマンスの最適化を行う上で重要なポイントです.
レンダーはマウント段階でも更新段階でもあります.
11、仮想DOM
仮想domはreactによって最初に提案された.
仮想DOMはDOMの基礎の上で抽象的な層を創立したので、私達はデータと状態のするいかなる変化に対して、いずれも自動的で効率的な同期に仮想DOMになられて、最後に更に大量にDOMの中に同期します.
バーチャルdomとは、具体的にはjsxであり、以下の通りです.
転載先:https://juejin.im/post/5d08b81ee51d454f73356d58