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

a1271916008發表於2023-03-31

元件的型別
判斷一個元件的型別,就是看:該元件是有狀態(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 = (

Here is content

);

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;


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69983064/viewspace-2942905/,如需轉載,請註明出處,否則將追究法律責任。

相關文章