Stateless component也叫无状态组件。有三种方法可以创建无状态组件。

坑

一般一个组件是怎么定义的：

很久以前的方法：

const Heading = createClass({

    render() {

        return <Text>{this.props.title}</Text>

    }

})

后来有了ES6

class Heading extends Component {

    render() {

        return <Text>{this.props.title}</Text>

    }

}

接ES6的光，看起来好了很多。

填坑

但是，一个组件不需要状态的时候还给出那么多的定义还是不够精炼，太麻烦。于是用stateless component来填这个坑。

// Stateless functions

const Heading = ({title}) => <Text>{title}</Text>

看起来是多么的简洁、有力！

来个完整的例子：

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);

运行起来是这样的：

显然stateless component更加的有表达力。但是在一个APP里也不可能所有的组件都是无状态的。所以最好是让一些容器（container）来包裹各种组件，而这些组件就可以写成是无状态的。用过Redux的都知道这么搞很有前途。

无状态组件没有生命周期的方法和显示的状态，这样加大的减少了代码量。但是无状态组件还是可以接收props的。比如，上例中的const HiTitle = ({title}) => (...)里的{ title }就是用来解析赋值props的。

既然可以接收props，那么也就可以设置propTypes和defaultProps。如：

const HiTitle = ({title}) => (

  <Text style={styles.title}>

    {title}

  </Text>

)

HiTitle.propTypes = {React.PropTypes.string.isRequired}

HiTitle.defaultProps = {title: 'stateless component'}