2017-04-06 63 views
0

我正在學習React,我正在使用create-react-app來運行它,它允許我編輯名爲App.js的文件中的文本,並且當我在該文件中保存地址爲http://localhost:3000/的網頁自動更新而不重新加載。通常,在製作html /純js文件時,我需要重新加載頁面。那麼它是如何動態更新自身的呢?熱重裝如何工作?

+0

webapp創建套接字連接並偵聽文件更改(使用瀏覽器控制檯進行檢查)。對每一次熵變都會重新加載。 – marmeladze

+0

當你在你的機器上運行本地服務器時,它使用IP「127.0.0.1」,也稱爲「本地環回」。通常,這個IP在主機文件中映射到'localhost'。現在當你運行你的服務器時,你指定了一個它應該監聽的端口,因此你的url是'http:// localhost:3000' – Rajesh

+0

可能重複:https://superuser.com/questions/321734/how-確實,本地主機-127-0-0-1工作 – Rajesh

回答

1

有一個概念Hot Reloading。熱重新加載背後的想法是讓應用程序繼續運行,並注入在運行時編輯的文件的新版本。它利用HMR,無需重新加載頁面,就地替換已更改的組件,保持狀態。這意味着,你的改變將在大約半秒鐘內可見;如果是對話框,則不需要重新打開它,文本輸入保持填充狀態等。簡而言之,迭代開發可以讓您花更少的時間等待應用程序重新加載。您可以查找更多詳細信息here

1

你正在使用的cli使用webpack來實現這一點。 Webpack是一個模塊打包程序,它從您嵌入到index.html文件中的所有js/ts/jsx/tsx文件創建一個包文件。爲了實現實時重載,webpack使用webpack-dev-server(一個小型​​node.js express服務器)。您可以配置您的webpack以查看文件上的更改,並且每當您的代碼發生更改時,webpack都會更新您的套件文件。您可以詳細瞭解它是如何工作的here。 所有的WebPack的配置都寫在webpack.config file.You可以瞭解更多有關webpak here。您也可以按照此link

1

這其實不是一個獨立的東西。

發生這種情況是因爲反應使用webpack dev服務器,如果您進行任何更改,它將重新加載軟件包。

如果您想要做同樣的事情,您需要設置本地服務器並始終在同一臺服務器上進行編輯。 browserSync也是一個選項,但您需要使用nodejs然後