功能使用propTypes

當反應組分VS React.Component

陣營0.14引入純功能部件是這樣的：功能使用propTypes

export const Label = ({title} => (
    <span>{label}</span> 
)

然而，我也想描述，其屬性和類型的組件支持組件的用戶，並且是默認值。

所以我要補充

Label.propTypes = { 
    title: React.PropTypes.string.isRequired 
} 

Label.defaultProps = { 
    title: "unknown" 
}

我也可以只使用一個React.Component這樣的：

class Label extends React.Component { 
    static propTypes = {} 
    static defaultProps = { 
    title: "unknown" 
    } 
    render() { 
     <span>{this.props.label}</span> 
    } 
}

一切都會立即可見和組件可以理解的。

爲什麼我們應該使用功能組件呢？

來源

2016-03-06 philk

我看到一個可使用的功能部件，即使在你的情況的原因：

沒有ES6或魔術做出反應組件上規模，所以輸出JS要短得多。
清潔分離。你有一個函數返回一個表示組件。像默認道具這樣的「元數據」與ES6組件是分開的。
如文檔指出，陣營想提供特殊的優化，功能組件所以它可能是更好的性能明智的未來使用它們比普通的組件，以用於演示：

在理想的世界中，大多數組件都是無狀態的函數，因爲未來我們還可以通過避免不必要的檢查和內存分配來針對這些組件進行性能優化。如果可能，這是推薦的模式。

來源

2016-03-06 19:07:22 Mijamo

特別是優化步驟（代碼大小和運行時間加速以後）和更清晰的代碼（沒有React魔法）讓我信服！ – philk

沒有必要使用純函數組件，它們創建的原因是爲了方便創建無狀態功能組件而無需擴展組件類。這篇文章stateless-components-in-react詳細解釋了這一點。

來源

2016-03-06 14:34:27

總之，使用無狀態功能組件當組件：

並不需要
不會被用作ref
任何內部狀態不需要任何生命週期行爲像componentDidMount或componenetWillReceiveProps

無狀態的功能組件的事件讓你避免過多的樣板和儀式時，我只是沒有必要。如果你需要這些其他的東西，請延長正常的Component。

從React 0.14 blog post

這種模式的目的是鼓勵應該包含您的應用程序的大部分這些簡單的組件的創建。未來，我們還可以通過避免不必要的檢查和內存分配來針對這些組件進行性能優化。

這也是一個很好的觀點。你的應用程序應該由許多許多小的組件組成，而不是一些龐大而複雜的組件。在許多情況下，小組件並不需要全面的吹響Component的花裏胡哨。對於這些，簡單的功能就足夠了。

來源

2016-03-06 14:38:00 naomik

我知道這一切。我的觀點更多的是，爲了創建一個可重用的，有文檔記錄的功能組件，你必須編寫相同數量的代碼。我的問題更像是功能組件是否具有或將具有任何（性能）好處。我以爲我讀了一些關於Facebook的計劃，以優化功能組件的渲染，因爲它們沒有副作用。 – philk

所有的優點，結合@Mijamo寫了一個很好的答案！ – philk

功能使用propTypes

回答

相關問題