React 進階之路(二)

豐寸發表於2019-05-14

在之前的文章中我們介紹了 React 開發的環境搭建及目錄介紹和整理,本篇文章將介紹 React 建立元件、JSX 語法、繫結資料和繫結物件。

之前我們已經將專案執行了起來,我們再來看一下目錄結構:


其中 App.js 檔案為我們的根元件,裡面的程式碼:

其中 import 為我們需要引入的檔案,在 App.js 中我們引入了 React ,一張 svg 圖片和 css 樣式,然後採用 ES6 物件的寫法,App 物件繼承了 React 的 Component ,並且通過 render 的方式放置我們的模板,這就是 JSX 語法,HTML 與 JavaScript 混寫。最後將物件 App 暴露出去。

執行結果為:

 

瀏覽器的呈現結果就是 App.js 檔案中 render 裡面的程式碼執行所得出的結果。所以我們只需要修改 App.js 裡面的 render 不等就能在瀏覽器端顯示不同的結果,但是所有的程式碼都寫在裡面程式碼會很多,不便於維護,所以我們需要將其進行模組化管理。

我們將 App.js 進行如下修改:

 1 import React, {Component} from 'react';
 2 import Home from './components/Home';
 3 
 4 class App extends Component {
 5     render() {
 6         return (
 7             <div className="App">
 8                <Home/>
 9             </div>
10         );
11     }
12 }
13 
14 export default App;

從上面的程式碼我們可以看出我們從 components 目錄下引入了 Home.js 元件,並將其放在了render 裡,這裡注意的是因為 HTML 標籤的 class 類名變為 className,這是因為

class 是JavaScript中的保留關鍵字,而JSX是JavaScript的擴充套件。這就是React不使用`class`而使用`className`的主要原因。

還有我們在引入元件時元件名稱需為首字母大寫。如果我們的 HTML 程式碼向換行的話需要在最外層包含一個根節點。

接下來我們在 components 目錄下建立 Home.js 檔案,並在 Home.js 檔案中插入以下程式碼:

 1 import React, {Component} from 'react';
 2 
 3 class Home extends Component {
 4     constructor(props){
 5         super(props);
 6         this.state = {
 7             name: "zhangsan"
 8         }
 9     }
10     render() {
11         return (
12             <div>
13                 Hello {this.state.name}
14             </div>
15         );
16     }
17 }
18 
19 export default Home;

 程式 http://localhost:3000 執行後我們將在瀏覽器端看到輸出結果 Hello zhangsan

其中 constructor 建構函式內需寫 super(); 表示我們的方法繼承自 Component,我們可以向資料繫結在 this.state 的物件屬性中,並在 HTML 模板中通過 { } 的形式將資料掛在到模板引擎上。

 

Es6中的super可以用在類的繼承中,super關鍵字,它指代父類的例項(即父類的this物件)。子類必須在constructor方法中呼叫super方法,否則新建例項時會報錯。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其進行加工。如果不呼叫super方法,子類就得不到this物件。

 

在 constructor(props) , super(props) 是用於父子元件間傳值時需要用到的。

 

相關文章