React Native填坑之旅--Stateless组件

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'}