React Native填坑之旅--Stateless组件
发布时间:2020-12-15 08:16:19 所属栏目:百科 来源:网络整理
导读:Stateless component也叫无状态组件。有三种方法可以创建无状态组件。 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ render() { return Text{this.props.title}/Text } }) 后来有了ES6 class Heading extends Component {
Stateless component也叫无状态组件。有三种方法可以创建无状态组件。 坑一般一个组件是怎么定义的: 很久以前的方法:const Heading = createClass({ render() { return <Text>{this.props.title}</Text> } }) 后来有了ES6class 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的都知道这么搞很有前途。 无状态组件没有生命周期的方法和显示的状态,这样加大的减少了代码量。但是无状态组件还是可以接收 既然可以接收 const HiTitle = ({title}) => ( <Text style={styles.title}> {title} </Text> ) HiTitle.propTypes = {React.PropTypes.string.isRequired} HiTitle.defaultProps = {title: 'stateless component'} (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |