React（三）—— 組件

時間 2019-12-06

標籤 react 組件欄目 React 简体版

原文原文鏈接

前言

本系列的前兩篇文章主要注重討論。本篇文章讓咱們深刻研究一些代碼並編寫咱們的第一個 React 應用程序。

回顧一下咱們前篇文章介紹的「Hello world」應用程序。寫法略有不一樣，以下所示：javascript

<!DOCTYPE html>
<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"> var app = <h1>Hello world</h1> var mountComponent = document.querySelector('#app'); ReactDOM.render(app, mountComponent); </script> </body> </html> 複製代碼

Hello world

加載 React 庫

咱們將 React 源代碼做爲<script> 標記包含在頁面的<head> 元素中。在咱們開始編寫 React 應用程序以前放置<script> 加載標記很重要，不然React 和ReactDOM 變量將沒法及時定義以供咱們使用它們。html

另外，head 內部還有另外一個script 標記，它引用了babel-core庫。但什麼是 babel-core?java

Babel

上篇文章中，咱們討論了 ES5 和 ES6。咱們提到對 ES6 的支持仍然良莠不齊。爲了使用 ES6，咱們最好將 ES6 代碼轉換爲 ES5 以支持更多的瀏覽器。react

Babel是一個將 ES6 轉換爲 ES5 的庫。web

在 body 中，咱們有一個腳本。在腳本內部，咱們定義了第一個 React 應用程序。注意腳本標記有一種 text/babel類型。ajax

<script type="text/babel">
複製代碼

這向 Babel 發出信號，咱們但願它在這個腳本中處理 JavaScript 的執行。這樣咱們就可使用 ES6 來編寫 React 應用程序，並確保 Babel會在只支持 ES5 的瀏覽器中實時轉換其執行。瀏覽器

控制檯警告?

當使用babel-standalone包時，咱們會在控制檯中獲得警告。這很好，也在預料之中。咱們將在幾篇文章內切換到預編譯步驟。bash

爲了便於使用，咱們在這裏包含了 <script />標記。服務器

React 應用程序

在 Babel 腳本主體中，咱們定義了第一個 React 應用程序。它由單個元素組成，<h1>Hello world</h1>。對ReactDOM.reander()的調用實際上將咱們的微小的應用程序放到了頁面上。若是沒調用ReactDOM.render()，DOM 中就不會呈現任何內容。ReactDOM.render()第一個參數是渲染的內容，第二個參數是渲染的位置。babel

ReactDOM.render(<what>, <where>)
複製代碼

咱們已經寫了一個 React 應用程序。咱們的「app」是一個表示h1標籤的 React 元素。但這並不有趣。富 web 應用程序接受用戶輸入，根據用戶交互更改它們的形狀，並與 web 服務器通訊。讓咱們從構建咱們的第一個 React 組件來開始接觸這種功能。

組件和更多

咱們在本系列文章的開頭提到，全部 React 應用程序的核心是組件。理解 React 組件的最佳方法是編寫它們。咱們將把 React 組件編寫成 ES6 類。

讓咱們看一下咱們稱之爲 App的組件。與全部其餘 React 組件同樣，此 ES6 類將從 React 包中繼承React.component類：

class App extends React.Component {
  render() {
    return <h1>Hello from our app</h1>
  }
}
複製代碼

全部 React 組件都至少須要一個 render()方法。render()方法的做用是返回瀏覽器 DOM 元素的虛擬 DOM 表示。

在咱們的 index.html中，讓咱們用新的 App組件替換以前的 JavaScript：

<!DOCTYPE html>
<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"> class App extends React.Component { render() { return <h1>Hello from our app</h1> } } </script> </body> </html> 複製代碼

但是，屏幕上不會顯示任何東西。你還記得爲何嗎？

咱們尚未告訴 React 咱們想要在屏幕上渲染任何東西或在哪裏渲染它。咱們須要再次使用ReactDOM.render()方法來告訴 React 咱們想要渲染的內容和位置。

添加ReactDOM.render()方法將在屏幕上呈現咱們的應用程序：

var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
複製代碼

Hello from our app

請注意，咱們可使用App類來呈現咱們的 React 應用程序，就像它是內置的 DOM 組件類型同樣（好比 <h1/>和`

標籤）。

這裏咱們使用它，就好像它是一個尖括號中的元素：<App />。

React 組件就像頁面上的任何其餘元素同樣，咱們能夠構建一個組件樹，就像建立一個本地瀏覽器樹同樣（譯者注：這裏應該就是指 DOM 樹）。

雖然咱們如今正在渲染 React 組件，但咱們的應用程序仍然缺乏豐富性或交互性。很快，咱們將會看到如何使 React 組件數據驅動和動態。

但首先，在本系列下一部分中，咱們將探討如何對組件進行分層。嵌套組件是富 React web 應用程序的基礎。

參考

這是國外關於 React 的一系列文章，爲了學習將其翻譯成中文。翻譯如有不正確的地方請指正。

原文連接： 30-days-of-react/day-3

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。