反応JSの重要概念の学習(第1部)

このポストでは、我々は反応JSのいくつかの重要な概念について議論します.いくつかの概念は、ちょうど彼らが普遍的である代わりに反応JSに関連していません.
我々がこのポストで議論するもののリスト.

のスパ(シングルページアプリケーション)

宣言

の構成

仮想DOM

一方向性データフロー

JSX

何がスパやシングルページのアプリケーションですか？

JavaScriptのフレームワーク/ライブラリの学習を開始したとき私たちの多くは前にこの用語を聞いたが、それは正確に何を意味します.
さて、シングルページアプリケーションは、すべてのファイル(HTML、CSS、JavaScript)がロードされたときにロードされるアプリケーションです.そして、私たちがサーバーに第2の要求をするとき、ページ全体をロードして、リフレッシュするよりむしろ、ページは動的に変わります.
私がすべてのファイル(HTML、CSS、JavaScript)を最初の荷に積んだと言いました.しかし、すべてのものを直接ユーザーに表示されていません.物事はユーザーの行動に基づいて表示されます.そして、それはスパの伝統的なアプリケーションよりもはるかに高速になります.
キーテイクアウトは、最初の負荷のすべてのファイルをスパロードし、動的にユーザーアクションに基づいてページを変更します.
Read more About SPA

宣言

学習はあなたが反復反応ではなく、宣言的なアプローチに従うことをしばしばこの用語を聞いて反応します.しかし、宣言的なアプローチは何ですか?
バニラJavaScriptでは、我々は何を必要と教えてDOMを使用します.しかし、反応で我々は直接何をするにはブラウザを教えてください.反応において、componentを参照するよりむしろ特定の方法でレンダリングされるDOMを定義します.
反応宣言的なアプローチのために、我々は物事が行われる方法に関してされないことをするだけであることに集中することができます.

組成

用語は自明ですプログラミングでは、合成によってより複雑な機能を構築することができます
小型および集中機能.
反応において、それらの上でより多くの機能性を構成するのに使用できるように、我々は方法で構成要素を定義します.

例を挙げましょう。

const Button = props => {
  return <button>{props.text}</button>
   }

const SubmitButton = () => {
  return <Button text="Submit" />
   }

const LoginButton = () => {
  return <Button text="Login" />
   }

上記の例では、Buttonを受け取るpropsコンポーネントを作成しました.
その後、Buttonコンポーネントを使用して、私は2つの他のコンポーネントSubmitButtonとLoginButtonを作成しました.私はtextを両方の場所のボタンコンポーネントに小道具として渡したことがわかります.
注意:メソッドをプロップとして渡すこともできます.
テイクアウトは組成が私たちの生活を容易にするので、なぜそれを使用していません.
Read more about Composition

仮想DOM

仮想DOMは、オブジェクトがメモリに格納され、後でReactdomのようないくつかのライブラリによって実際のDOMと同期する場所です.
これは実際のDOMとほとんど同じです、あるいは、我々は本当のDOMの軽量コピーを言うことができます.仮想DOMを更新する間、実際のDOMを更新するのは遅くなります.
Read More About Virtual DOM

一方向データフロー

一方、頻繁にこの用語を聞くつもりです反応学習.
一方向性データフローは、反応するユニークな概念ではありませんが、JavaScript開発者として、これはあなたがそれを聞くのが初めてかもしれません.
一般的に、この概念は、データがアプリケーションの他の部分に転送される方法と1つだけを持っていることを意味します.
反応では、

状態は、ビューおよびチャイルドコンポーネント

に渡される

のアクションは、ビュー

によって引き起こされます

のアクションは、状態

を更新することができます

状態の変更はビューと子コンポーネントに渡されます.

日本学術振興会

JSXはJavaScript XMLを表します.JSXでHTMLを書くことができます.JSXは簡単に書くことを追加し、HTMLを反応させる.
最初は、これは奇妙に見えるかもしれないが、これはどのように反応する動作です.

   const name= "Sachin Chaurasiya"

   const hello=props=>{
    return(
        <h1>Hello,{name}</h1>
         )
    }

上の例では、JSX以外のJavaScriptをHTMLの中に使用しています.最初は奇妙な感じがしますが、しばらくしてこのJSX構文が好きになります.

結論

これらは反応JSのいくつかの重要な概念です、そして、より多くがこのポストの次の部分でカバーするでしょう.
そして、それはこのトピックのためです.お読みありがとうございます.

接続する

畝