React （一）—— React 是什麼？

時間 2019-12-07

標籤 react 什麼欄目 React 简体版

原文原文鏈接

前言

今天咱們將從頭開始學習 React。咱們將瞭解到 React 是什麼以及什麼使它起做用。而後討論爲何要使用它。

在接下來的30天內，你將會對 React 框架及其生態系統的各個部分有一個良好認識。javascript

在咱們30天的冒險旅程中，天天都將之前一天的內容爲基礎，所以在本系列的最後，你不只將瞭解框架如何工做的術語、概念和基礎，還將可以在下一個 web 應用程序中使用 React。html

React 是什麼？

React是一個用於構建用戶界面的 JavaScript 庫。它是 web 應用的視圖層。java

全部 React 應用程序的核心都是組件。組件是一個自包含模塊，能夠渲染一些輸出。咱們能夠將界面元素（如按鈕或輸入字段）寫成 React 組件。組件是可組合的。組件可能在其輸出中包含一個或多個其餘組件。react

通常來講，爲了編寫 React 應用程序，咱們編寫與各類界面元素相對應的 React 組件。而後咱們將這些組件組織在高級組件中，這些高級組件定義了應用程序的結構。web

例如，一個表單。表單可能包含許多界面元素，如輸入字段，標籤或按鈕。表單的每一個元素均可以被寫成組件。而後咱們編寫一個更高級的組件，表單組件自己。表單組件將指定表單的結構，並在其中包含每個界面元素。ajax

重要的是，React 應用程序的每一個組件都遵照嚴格的數據管理原則。複雜的交互用戶界面一般涉及複雜的數據和應用程序狀態。React 的表面區域是有限的，旨在爲咱們提供工具，使咱們可以預測應用程序在給定狀況下的外觀。咱們將在課程後期深刻探討這些原則。瀏覽器

Note : The surface area of React 直譯爲 React 的表面區域, 有更好的翻譯請告知babel

如何使用 React ?

React 是一個 JavaScript 框架。使用該框架很是簡單，只需在 HTML 包含 JavaScript 文件，並在應用程序的 JavaScript 中使用 React 的導出便可。app

例如，React 網站的 Hello world 示例能夠很是簡單：框架

<html>
<head> <meta charset="utf-8"> <title>Hello world</title> <!-- Script tags including React --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello world</h1>, document.querySelector('#app') ); </script> </body> </html>
複製代碼

雖然它可能看起來有點可怕，但 JavaScript 代碼只有一行，能夠動態地將 Hello world 添加加到頁面上。注意，咱們只須要包含少許 JavaScript 文件就可讓一些正常運行。

React 是如何工做的？

與它的許多前輩不一樣，React 不是直接在瀏覽器的文檔對象模型（Document Object Model，DOM)上操做，而是在虛擬 DOM (Virtual DOM)上操做。也就是說，在對數據改變後，它不是在瀏覽器直接操做文檔（可能很是慢），而是在構建的 DOM 上解析更改並徹底在內存中運行。虛擬DOM 更新後，React 會智能地決定對實際瀏覽器的 DOM 進行更改。

React 的虛擬DOM 徹底存在於內存中，是 web 瀏覽器 DOM 的表示。所以，當編寫組件時，咱們不是直接寫入 DOM，而是編寫一個虛擬組件，React 將其轉換爲 DOM。

在下一篇文章中，咱們將介紹 JSX 並編寫咱們第一個真正的組件。