Demo/代幣質押合約系統開發功能/DAPP合約系統開發專案方案

元件的型別
判斷一個元件的型別，就是看：該元件是有狀態（stateful），還是無狀態（stateless）。
同樣，如果使用一個元件，需要維護一個內部的狀態，那麼就選擇有狀態的元件型別；相反，如果不需要維護狀態，就是無狀態型別元件。

1 什麼叫狀態（state）?
狀態是一個元件中的資料集合，當『有狀態的元件』（stateful component）被載入到記憶體中時，這些資料也同時被儲存在記憶體中。當渲染帶狀態的元件時，狀態中資料可能會對該元件及其子元件產生影響。相對而言，如果是一個『無狀態元件』，自己是沒有資料，結果就是要麼這個無狀態元件就是純粹的渲染 html 內容，不需要對資料進行判斷和處理；要麼這個元件所需要的資料，都是來自於上層結構（父元件傳遞下來的資料，或者 Redux 的 store 中的資料）。

因為這種資料從上下向下的流動，所以通常『有狀態元件』會包含若干『無狀態元件』。『有狀態元件』就像一個容器，內部盛放著『無狀態元件』：當『無狀態元件』需要資料，都是從上層的『有狀態元件』提供。

因此『有狀態元件』（stateful component）通常被稱為『容器』（container）或者『容器元件』，又因為『有狀態元件』控制著『無狀態元件』如何去渲染，邏輯如何變換，所以也被稱為『聰明元件』（smart component）。相反，『無狀態元件』（stateless component）因為不能控制自己的資料，資料都是外部獲取，就像一個木偶被上層操控來作為一個表現層，所以被曾為『變現性元件』（presentational component），也被稱為『木偶元件』，英文是"Dumb component"。

2 如何為元件增加狀態？
通常，函式（function）與類（class）最大的區別是：是否能夠維護自己的資料（即狀態）。函式基本上僅關注動作（action），而不關心資料的維護，不用維持一個狀態，不用把自己的資料儲存在記憶體中。函式使用的資料是從外部獲取（或者不獲取資料），函式執行時，會完成一系列的動作，最後將結果返回（也可能不返回，僅僅是完成指定的動作）。相對而言，類有能力維護狀態（儲存資料），也可以定義自己的一系列動作。

一般來說，函式的速度較快，適合用於做表現層，而類能夠處理複雜邏輯和狀態，適合做邏輯層和資料層。所以，對於 React 來說，一般選擇函式來『無狀態元件』，得到所謂的『無狀態函式』（stateless function），好處是渲染的速度快，所以多使用無狀態元件，儘量不要讓資料散落在各個元件中。資料集中管理可以更好的保持資料的一致性和可維護性。

『有狀態元件』就是使用類來生成。類可以有自己的狀態，維護自己的資料，也是完全符合『有狀態元件』的要求。但是類相對來說速度比函式慢，影響渲染的效能，同時資料過於分散會給後期的維護帶來比較大的困難（這也是為什麼狀態過多時要使用 Redux 的原因），因此要儘量控制有狀態元件的數量。當然，類也可以生成無狀態元件，但是既然不需要維護狀態的工作，用函式能完成得更好，其實也就沒有必要使用類來做無狀態元件。

合理的元件目錄結構
1 單js檔案專案
元件完全可以用單個js檔案來實現，比如下面的例子：

// 類與函式都能生成 React 的元件
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
render() {

return (<h1>Main Title</h1>);

}
}

const Subtitle = () => (

subtitle

);

const jsx = (

);

ReactDOM.render(jsx, document.getElementById('root'));
實際上，上面這部分程式碼有一些問題：

元件儘量拆分到 src（source code，原始碼）檔案下的其他資料夾中，而不是全部寫在 index.js 中，甚至元件都應該全部歸攏到 App.js 這個元件中，再一次性的給 index.js 去渲染。
函式的命令規範是小寫字母開頭的駝峰法（比如：printName），而 React 中元件命名，用大寫字母命名，比如 PrintName，寫成標籤形式就是 ，或者 。大寫的標籤是 React 元件區別於 html 原生標籤的做法。
因此需要對目錄結構進行調整。

2 元件歸類到 components 目錄
具體的做法：

首先把所有的元件單獨做成一個檔案，比如 Title 部分做成 Title.js 檔案。
這些元件都歸類放在 /src/components/ 目錄下，Title.js 與 Subtitle.js 都放在 /src/components/ 目錄下
新建 App.js，所有的元件都在這裡引入。
index.js 只引入 App.js，保持入口檔案 index.js 的整潔。
調整後的 src 目錄結構如下:

.
├── src
│ ├── App.js
│ ├── components
│ │ ├── Subtitle.js
│ │ └── Title.js
│ ├── index.js
│ └── template.html
程式碼如下：

/  /src/indx.js /
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

/  /src/App.js /
import React, { Component } from 'react';
import Title from './components/Title'
import Subtitle from './components/Subtitle'

class App extends Component {
render() {

return (  <div>
    <Title />
    <Subtitle />
  </div>);

}
}
export default App;

/  /src/components/Title.js /
import React from 'react';

class Title extends React.Component {
render() {

return (
  <h1>Here is title</h1>
);

}
}
export default Title;

/  /src/components/Subitle.js /
import React from 'react';

const subtitle = () => (

Subtitle

);
export default subtitle;