React 進階之路（二）

豐寸發表於2019-05-14
React

在之前的文章中我們介紹了 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) 是用於父子元件間傳值時需要用到的。

 

相關文章