智慧屏的React.js(介紹和工作)

            添加時間:2022-01-10 14:42:28

            來源:

            瀏覽:

            智慧屏的ReactJS 簡介:讓我們通過一個實際的例子來理解這一點。


            假設您的一位朋友在 Facebook 上發布了一張照片?,F在你去喜歡這張圖片,然后你也開始查看評論?,F在,當您瀏覽評論時,您會看到贊數增加了 100,因為您喜歡這張圖片,即使沒有重新加載頁面。這種神奇的計數變化是因為 Reactjs。 

            React 是一個聲明式、高效且靈活的 JavaScript 庫,用于構建用戶界面。它是MVC中的“V”。ReactJS 是一個開源的、基于組件的前端庫,只負責應用的視圖層。它由 Facebook 維護。

            React 使用聲明式范式,可以更輕松地推理您的應用程序,旨在既高效又靈活。它為應用程序中的每個狀態設計簡單的視圖,當數據發生變化時,React 將有效地更新和呈現正確的組件。聲明式視圖使您的代碼更具可預測性且更易于調試。

            React 應用程序由多個組件組成,每個組件負責渲染一小段可重用的 HTML。組件可以嵌套在其他組件中,以允許使用簡單的構建塊構建復雜的應用程序。一個組件也可能維護一個內部狀態——例如,一個 TabList 組件可能存儲一個與當前打開的選項卡對應的變量。


            注意: React 不是框架。它只是 Facebook 開發的一個庫,用于解決我們之前面臨的一些問題。

            先決條件:下載最新版本的 Node 包。


            示例: 使用以下命令創建一個新的 React 項目:


            npx create-react-app myapp

            文件名 App.js:現在使用以下代碼更改App.js文件:





            import React,{ Component }  from 'react';

             

            class App extends Component {

             

              render() {

                return (    

                   <div>

                     <h1>Hello, Learner.Welcome to GeeksforGeeks.</h1>

                   </div>

             

                );

              }

            }

                

            export default App;

            輸出: 


            它是如何工作的: 在構建客戶端應用程序時,一個 Facebook 開發團隊意識到 DOM 很慢(文檔對象模型(DOM)是 HTML 和 XML 文檔的應用程序編程接口(API)。它定義了邏輯結構文檔以及訪問和操作文檔的方式。)。所以,為了讓它更快,React 實現了一個虛擬 DOM,它基本上是 JavaScript 中的 DOM 樹表示。所以當它需要讀取或寫入 DOM 時,它會使用它的虛擬表示。然后虛擬 DOM 會嘗試尋找最有效的方式來更新瀏覽器的 DOM。

            與瀏覽器 DOM 元素不同,React 元素是普通對象并且創建成本低。React DOM 負責更新 DOM 以匹配 React 元素。這樣做的原因是 JavaScript 速度非???,值得在其中保留 DOM 樹以加快其操作速度。

            盡管 React 被設想在瀏覽器中使用,但由于其設計,它也可以在帶有 Node.js 的服務器中使用。 


            用戶名 Name
            評論 Comment

            聯系我們

            / CONTACT US

            地 址:四川省成都市航空路豐德國際廣場

            郵政編碼:610000

            電 話:18215660330

            傳 真:18215660330

            手機:18215660330

            郵 箱:179001057@qq.com

            投訴郵 箱:179001057@qq.com

            姓名Name
            標題Title
            郵 箱Emali
            聯系電話Tel
            內容Content
            凤凰彩票