360SDN.COM

React-Native入门指南-第七篇动手写组件

来源:  2017-05-31 17:18:16    评论:0点击:

来源:http://vczero.github.io/react_native/%E7%AC%AC6%E7%AF%87jsx%E5%9C%A8react-native%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8.html
第六篇JSX在React-Native中的应用
一、JSX概述

你一定疑问为什么要用JSX?其实这不是必需,而是建议。只是因为React是作为MVC中的V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML的超类就是XML,React-Native将这个带到了解放前,不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西,JSX只是对JavaScript进行了拓展,仅此而已。

二、语法介绍

1、类XML UI组件表达,在React-Native中表现为:
render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                Welcome to React Native!
            </Text>
        </View>
    );
}

2、js表达式
在JSX中,表达式需要{}包裹,例如:
render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                {0? '第一段': '第二段'}
            </Text>
        </View>
    );
}
上面的代码我们可以看出,style={}是一个表达式;{0? '第一段': '第二段'}是表达式,最后显示的应该是“第二段”。

3、属性
在HTML中,属性可以是任何值,例如:<div tagid="00_1"></div>,tagid就是属性;同样,在组件上可以使用属性。
建议使用以下方式:
var props = {
    tagid: 'GGFSJGFFATQ',
    poiname: '东方明珠'
};
return (<View {...props}></View>);

4、如果需要在调用组件的时候动态增加或者覆盖属性,又该如何呢?
很简单:<View {...props} poiname={'虹桥机场'}></View>

5、关于样式
(1)普通内联样式:{{}},第一层{}是表达式,第二层{}是js对象;
<View style={{fontSize:40, width:80,}}> </View>
(2)调用样式表:{样式类.属性}
<View style={styles.container}></View>
(3)样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
(4)多个样式表:{[样式类1, 样式类2]}
<View style={[styles.container, styles.color]}>

6、属性校验
为了实现强类型语言的效果,我们可以使用propTypes来声明数据属性的合法性校验。例如:
React.createClass({
    porpTypes:{
        username: React.PropTypes.string,
        age: React.propTypes.number,
    }
});

7、设定默认属性
React.createClass({
    getDefaultProps: function(){
        return {
            sign: '这个家伙很懒,什么都没留下'
        };
    }
});

8、组件的生命周期
componentWillMount:组件创建之前
getInitialState:初始化状态
render:渲染视图
componentDidMount:渲染视图完成后
componentWillUnmount:组件被卸载之前

三、了解虚拟DOM

React进行了虚拟DOM的封装,所有的视图的更新都是虚拟DOM做了一个校验(diff)后最小更新。为什么这么做,因为现在机器的内存已经足以支撑这样视图UI的diff计算,用内存计算换取UI渲染效率。

1、我们需要获取组件中真实的dom
React.findDOMNode(component)

2、第二节已经简单说了组件的生命周期(will, did)
组件的生命周期分为3个部分:
Mounting:正在装载组件;
Updating:重新计算渲染组件;
Unmounting:卸载组件


第七篇动手写组件

React-Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方式就是将功能组件化。

一、最简单的方式

这里我们实现一个最简单的组件,就是邮件的末尾署名的组件。组件意味着复用,意味着统一。现在有这样一个需求,我们需要根据不同用户发送邮件时,生成每个用户的名片(即邮件末尾的署名)。

1、一般一开始的实现方式如下,直接将组件内容写到功能需求的地方:
<View>
    <View>..........这里是当前邮件组的其它功能</View>
    <View>
        <Text>框架研发部</Text>
        <Text>www.ctrip.com</Text>
    </View>
</View>

2、有一天,其它的部门的同事提出他们也需要在其他的地方,增加他们的邮件署名,那么你是否又会复制一份代码呢,当然不是,我们可以组件化:
var Email = React.createClass({
    render: function(){
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{this.props.name}</Text>
                <Text style={styles.text}>{this.props.url}</Text>
            </View>
        );
    }
});

3、整体的代码如下:

二、循环一个文章列表

要实现的效果如下图:

第一步改造我们的组件
var Article = React.createClass({
    render: function(){
        return (
            <View style={styles.container}>
                <Text style={[styles.text, styles.title]}>{this.props.title}</Text>
                <Text style={styles.text}>{this.props.author}</Text>
                <Text style={styles.text}>{this.props.time}</Text>
            </View>
        );
    }
});

第二步定义数据model和循环
var App = React.createClass({
    getInitialState: function(){
        var data = [
        {
            title: "React-Native入门指南",
            author: "vczero",
            time: "2015-06-28"
        },
        {
            title: "为什么世界不一样",
            author: "vczero",
            time: "2015-06-8"
        },
        {
            title: "你来,我就告诉你",
            author: "vczero",
            time: "2015-04-01"
        }
    ];
    return {
        articles: data
    };
},
render: function(){
    return(
        <ScrollView>
        {this.state.articles.map(function(article){
        return <Article title={article.title} author={article.author} time={article.time}/>
        })}
    </ScrollView>
    );
    }
});

整个代码如下:

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权