Stateless component也叫無狀態(tài)組件。有三種方法可以創(chuàng)建無狀態(tài)組件。
坑
一般一個(gè)組件是怎么定義的：
很久以前的方法：
const Heading = createClass({
render() {
return <Text>{this.props.title}</Text>
}
})
后來有了ES6
class Heading extends Component {
render() {
return <Text>{this.props.title}</Text>
}
}
接ES6的光，看起來好了很多。
填坑
但是，一個(gè)組件不需要狀態(tài)的時(shí)候還給出那么多的定義還是不夠精煉，太麻煩。于是用stateless component來填這個(gè)坑。
// Stateless functions
const Heading = ({title}) => <Text>{title}</Text>
看起來是多么的簡(jiǎn)潔、有力！
來個(gè)完整的例子：
const HiTitle = ({title}) => (
<Text style={styles.title}>
{title}
</Text>
)
const App = () => (
<View style={styles.container}>
<HiTitle title='A stateless component' />
</View>
)
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
title: {
fontSize: 36,
fontWeight: 'bold',
color: 'red'
}
})
AppRegistry.registerComponent('AwesomeProject', () => App);
運(yùn)行起來是這樣的：
顯然stateless component更加的有表達(dá)力。但是在一個(gè)APP里也不可能所有的組件都是無狀態(tài)的。所以最好是讓一些容器（container）來包裹各種組件，而這些組件就可以寫成是無狀態(tài)的。用過Redux的都知道這么搞很有前途。
無狀態(tài)組件沒有生命周期的方法和顯示的狀態(tài)，這樣加大的減少了代碼量。但是無狀態(tài)組件還是可以接收props的。比如，上例中的const HiTitle = ({title}) => (...)里的{ title }就是用來解析賦值props的。
既然可以接收props，那么也就可以設(shè)置propTypes和defaultProps。如：
const HiTitle = ({title}) => (
<Text style={styles.title}>
{title}
</Text>
)
HiTitle.propTypes = {React.PropTypes.string.isRequired}
HiTitle.defaultProps = {title: 'stateless component'}
