zoukankan      html  css  js  c++  java
  • React Native中常用ES6语法

    一:模块导入导出

    //ES6
    import React, { 
        Component,
        PropTypes,
    } from 'react';
    import {
        Image,
        Text
    } from 'react-native'

    导出单个类:

    //ES6
    export default class MyComponent extends Component{
        ...
    }

    二:定义组件:继承React.Component

    //ES6
    class Photo extends React.Component {
        render() {
            return (
                <Image source={this.props.source} />
            );
        }
    }

    组件内的方法定义:给组件定义方法不再用 名字: function()的写法,而是直接用  名字(),在方法的最后也不用再写逗号。

    组件内属性类型与默认属性值定义:使用static成员来实现:

    class Video extends React.Component {
       static propTypes = {//属性声明
            autoPlay: React.PropTypes.bool.isRequired,
            maxLoops: React.PropTypes.number.isRequired,
            posterFrameSrc: React.PropTypes.string.isRequired,
            videoSrc: React.PropTypes.string.isRequired,
        };  // 注意这里有分号
        static defaultProps = {//设置属性默认值
            autoPlay: false,
            maxLoops: 10,
        };  // 注意这里有分号
       //方法定义 
        render() {
            return (
                <View />
            );
        } // 注意这里既没有分号也没有逗号
    }

    三:箭头函数

    箭头函数实际上是在这里定义了一个临时的函数,箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

    四:解构赋值

    为数组操作、多值传递提供便利。

  • 相关阅读:
    Hibernate——openSession和getCurrentSession区别
    Oracle存储过程分页 详解
    如何破解mysql数据库的密码
    Oracle约束详解
    Oracle分页查询
    Oracle如何管理权限和角色
    悲观锁和乐观锁详解
    Oracle控制结构详解
    Rose建模之各模型分析
    div布局中将页面居中的方法
  • 原文地址:https://www.cnblogs.com/ygj0930/p/7249142.html
Copyright © 2011-2022 走看看