react.js和Ajax之間的區別

Question

當我搜索關於React.js時，得到的是：React.js是一個用於創建用戶界面的框架。如果網站的某個部分經常更新，這意味着我們可以使用反應。但我很困惑，Ajax僅用於此目的。我們可以使用Ajax更新網站的一部分而不刷新頁面。對於模板，我們將使用手柄和小鬍子。有人可以用什麼方式解釋我的反應與Ajax不同以及我們爲什麼應該使用它。

Answer 1

Ajax用於刷新網頁而無需重新加載它：它向服務器發送請求，但通常由JavaScript處理響應，動態顯示瀏覽器上的新元素而無需重新加載整個頁。

React是一個JavaScript庫，它使用inferface組件動態更新頁面。這些組件通過javascript交互或通過服務器的ajax請求進行計算。所以ReactJS也可以使用Ajax請求來更新頁面。

小鬍子和把手與ReactJS有點不同，因爲主要目標是轉換將顯示在頁面中的組件中的模板。它也可以使用Ajax獲取數據（用於獲取模板或json數據）。

Answer 2

只是爲了澄清反應不是一個框架，它是一個庫！

把它從馬的嘴：

https://facebook.github.io/react/

Answer 3

阿賈克斯

我們正在使用AJAX來發送HTTP請求。我們不能通過單獨使用ajax來重新渲染頁面的特定區域（DOM）。在ajax調用響應後，我們需要jquery重新呈現頁面。實際上比較jquery + HTML和React.js比比較ajax和React.js要好得多。

React.js

的react.js的作用是將網頁（DOM）爲小撕成小塊（組件）。例如： - 配置文件圖像區域，主導航，側欄，文本框，按鈕。從大型飲料到小型飲料。最重要的是，我們可以將功能綁定到這些組件中。例如： - 假設用戶需要點擊上方的「個人資料圖片區域」才能上傳個人資料圖片。我們可以編寫一個函數來打開一個彈出窗口。而且我們還可以編寫另一個功能將配置文件圖像上傳到數據庫。這樣我們可以在React.js裏面使用ajax

請按照這個tutorial。

Answer 4

這可能是更簡單的比你要找的，但對於其他人誰可能會混淆...

要了解反應，你需要了解如何AJAX改變了一切：

記住90年代的互聯網？

當你點擊任何東西時，頁面將不得不重新加載，以顯示你的點擊發生了什麼 - 即使它沒有。 Here's a good example。該網站建立之前AJAX是一件事情。

現在看看這個頁面：每個答案旁邊是向上箭頭。繼續點擊其中一個。注意頁面不會重新加載，但您會得到反饋：箭頭變成橙色。

---

AJAX

AJAX代表甲同步Ĵ avascript 甲 ND X ML。但最重要的詞有異步，這意味着「在不同的時間」。在我們的堆棧溢出示例中，這意味着將一些信息發送到計算機（服務器），並且服務器發回一些信息。在AJAX之前，完成將數據發送到服務器的唯一方法是使用頁面重新加載。

下面是當你點擊堆棧溢出的向上箭頭髮生的事情：

1. 你的瀏覽器（Chrome/IE/Firefox或什麼的，也被稱爲「客戶」）將消息發送到堆棧溢出服務器。這被稱爲Request，因爲您的瀏覽器正在請求服務器的響應。
2. 堆棧溢出（SO）服務器確認您可以點擊該按鈕（一個不被允許的例子是註冊您自己的帖子）
3. SO服務器向您的瀏覽器發送消息，說「是」或「no」
4. 根據SO的javascript文件指示，您的瀏覽器知道「是」意味着打開向上箭頭橙色表示您的操作已成功。

現在的一切都使用AJAX。沒有它，很難想象網絡。想想看，如果你正在檢查你的gmail，並且每次你打開一封新郵件重新加載頁面，這將會是多麼令人討厭。您必須等待您的瀏覽器每次重建頁面。相反，頁面不會改變，並且可以從服務器檢索數據，而幾乎沒有任何等待。

---

React.js

React是一個JavaScript庫。如果您想了解更多關於庫和框架與工具包之間的差異，請查看this great post。

但基本上，React允許您使用已編寫的代碼來加快創建網頁或應用程序所需的時間。它也使用聲明性編碼範式，而不是一個命令性範例。這基本上意味着你告訴它你想看到什麼，它決定了完成它的最佳方式。

這意味着，就您的問題而言，React內置了AJAX。它知道何時使用它，何時不使用它。所以，如果你說「我想要一個upvote按鈕」React將使用AJAX來完成。如果，而是你說「我想要一個用戶能夠添加評論」React知道它不想爲此使用AJAX。

---

髭

Moustache是模板系統。這意味着它可以讓你定義一個網頁的結構與內容分開。舉例來說，這裏是一個普通的HTML頁面，而鬍子：

<h1>This is the Title of My Page. This is Content</h1> 
<p>This is a paragraph. blah blah blah. My email is me@me.com</p> 
<footer>Contact me at me@me.com</footer> 

的結構是由HTML定義：<h1> & <p>是「標籤」告訴網絡瀏覽器（Chrome或Firefox或IE）的內容的結構。內容在標籤內。

上面，如果你想改變你的電子郵件地址，你必須改變它在兩個地方，這是壞的，因爲也許十年過去了，你忘記了你把你的電子郵件或其他人的所有地方工作後面的代碼，他們不知道它在2個地方。

在鬍子，你可以做這樣的事情：

<script> 
    var json = { 
    title: "This is the Title of My Page. This is Content", 
    paragraph: "This is a paragraph. blah blah blah. My email is ", 
    footer_verbiage: "Contact me at ", 
    email: "me@me.com" 
    } 
</script> 

<h1>{{title}}</h1> 
<p>{{paragraph}} {{email}}</p> 
<footer>{{footer_verbiage}} {{email}}</footer> 

看，你定義在腳本的內容，從結構上分開。所以如果你想改變你的電子郵件，你只需要在一個地方改變它。

---

把手

Handlebars使鬍子更強大。這裏有一個good post關於差異的更多信息。在我們上面的示例中，Handlebars允許模板（HTML）在客戶端而不是服務器上重新呈現。

---

綁它一起

陣營創建HTML，使用鬍鬚的結構從內容分離。然後React創建客戶端和服務器（AJAX）之間的腳本和通信。當AJAX獲取新數據時，Handlebars會重新渲染應用變量的內容（如有必要），以及其他任何內容進入「動態內容」。

例如，假設用戶點擊一個按鈕後，段落內容會改變。

AJAX會去獲取新內容，並且json變量將被重新定義。鬍鬚將允許動態替換該內容。

---

獎勵 - 什麼是角度？爲什麼這麼大？：

MVC代表模型，視圖，控制器。這是一種編碼模式，它允許Web應用程序避免很多複雜性，如果您曾經在純jQuery中編寫過應用程序，那麼您知道事情會非常快速地失控（另請參閱spaghetti code）。 React，Mustache和Handlebars一起工作來設置一些類似MVC模式的東西。但它需要很多設置，並且至少有3個js文件不是相互設計的（例外是Handlebars與Mustache的關係）。

進入角

角讓你做這一切與一個文件。另外它適用於一項簡單的技術：搜索（Angular由Google製作）。在我們上面的示例中，您可以更改電子郵件，並在網頁上查看它的更改。這使得Angular成爲一個不可或缺的框架，簡單易學的基礎知識。

有缺點但是：

• 痛苦掌握
• 它沒有很大的意義在傳統方式的網站都建立
  • 您需要重新構建你的方式考慮web應用程序，甚至MVC應用程序
• 有多個版本漂浮，以及一百萬種方法來完成wh在你想要的時候，所以某件事可以在一件事情中正常工作，但不能在另一件事件中工作
  • 這也意味着當您在SO上找到幫助時，您必須學會如何將它翻譯成您正在使用的任何版本/設置。
• 內置UI很糟糕 - 您通常需要UI Bootstrap才能使事情順利進行。
• 文檔非常糟糕。它需要你已經瞭解了很多關於Angular的知識。
• 那些傾向於回答關於SO的問題的人在理解你所問的內容，甚至是閱讀你的整個問題方面都不太好。
• 有太多方法可以產生一個不返回錯誤信息的錯誤。

但是，儘管如此，如果您嘗試在學習角度和反應之間進行選擇，那麼就要採用角度。事實上，React與角色一起工作，所以你可能能夠轉換，雖然我從來沒有使用過。