文档中心 > 千牛开放平台2.0

与传统Web开发的区别

更新时间：2017/08/11 访问次数：2657

HTML标签的区别

Rax只支持有限的几种固定标签。
View: 这个可以看做一个DIV，就是一个普通的容器。
Text: 文本标签，暂时还不支持富文本，所以Text标签里是不能嵌套任何标签。
Image：图片标签
TouchableHightlight: 具有点击事件标签，如果一个元素需要响应点击事件，那么就需要这么一个标签包起来。
ScrollView：所有需要能滚动页面需要用一个scrollView来包裹起来
ListView: 这是个特殊的列表标签，具有多个重复元素的列表显示就应该用这个标签啦。
除了固有的几个标签，为了方便开发，QAP还提供了一套组合的UI组件，具体的使用请查看nuke的文档。
Rax的标签还可以无限扩展，除了rax的几个固定标签，还可以自定义无限的标签，每个标签就是自己写的一个组件。（怎么写相关组件，请查看组件的教程）

JS方面的区别

rax使用了react的语法，所以在开发之前，需要先理解react的语法，同时只支持了es6的写法。

不能使用React.createClass，只能使用class MyClass extends Component的写法

固有属性的赋值方法不同

比如下边3个属性得赋值


    getInitialState: function() {
        return {
            esVersion: `${this.props.name} v1.0`,
            clickCounts: 0,
        };
    },
    getDefaultProps: function() {
        return {
            name: 'ES5Syntax',
            year: 2014,
            label: 'ClickMe',
        };
    },
    propTypes: {
        name: React.PropTypes.string.isRequired,
        year: React.PropTypes.number.isRequired, // isRequired：本属性必须被包含，否则会产生 warning
        label: React.PropTypes.string
    },

需要使用如下的方法定义

state = {
        sVersion: `${this.props.name} v1.0`,
        clickCounts: 0,
    };
    static defaultProps = {
        name: 'ES6Syntax',
        year: 2015,
        label: 'ClickMe',
    };  // 注意这里有分号，用 `class` 定义的类内部的属性需要用分号 `;` 间隔开，方法不需要。
    static propTypes = {
        name: React.PropTypes.string.isRequired,
        year: React.PropTypes.number.isRequired,
        label: React.PropTypes.string.isRequired,
    };  // 注意这里有分号

函数指针绑定的不同

es5中，react会把所有类里的函数都绑定一次this，
在es6中，这一切都要自己进行绑定。


class MyClass extends Component {
    //利用箭头函数绑定
    method = ()=> {
    }

    method2() {
    }

    render() {
         //利用bind进行绑定
        var bind = this.method2.bind(this);
    }

}

模板字符串不同

es5中
esVersion: this.props.name + “ v1.0”,

es6中支持这样 esVersion: ${this.props.name} v1.0,

CSS方面的不同

CSS与传统的CSS区别比较大，rax中CSS只是一个CSS对象，

比如
传统的css中
定义css

.class {
   width: 2323
}

在rx中需要定义为
class = {
width: 2323
}

同时，为了方便，定义的时候可以定义为

const styles = {
    class: {
        width: 2323
    }
}

使用上的区别
单个class

<Text style={styles.class} >

多个class

<Text style={[styles.class, style.class2]} >

行内css

<Text style={{width: '2323rem'}} >

行内与class的混用

<Text style={[{width: '2323rem'}, styles.class]} >

CSS的支持属性一览

完整的css属性一览请查看支持CSS属性一览

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问