React Native JavaScripts的实用小技巧

在学习React Native 中，发现很实用的一些小技巧,应该会不定期增减

1. 避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

        function search() {            //当我要使用当前页面地址和主机域名            alert(window.location.href + window.location.host);        }        //最好的方式是如下这样  先用一个简单变量保存起来        function search() {            var location = window.location;            alert(location.href + location.host);        }

2.定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器

        var timeoutTimes = 0;        function timeout() {            timeoutTimes++;            if (timeoutTimes < 10) {                setTimeout(timeout, 10);            }        }        timeout();        //可以替换为：        var intervalTimes = 0;        function interval() {            intervalTimes++;            if (intervalTimes >= 10) {                clearInterval(interv);            }        }        var interv = setInterval(interval, 10);

3.字符串连接

如果要连接多个字符串，应该少使用+=;如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后使用join方法连接起来

    s+=a;    s+=b;    s+=c;    // 替换为    s+=a + b + c;    //多次收集    var buf = [];    for (var i = 0; i < 100; i++) {        buf.push(i.toString());    }    var all = buf.join("");

4.常用字符串处理常用方法

    /** 去除两端空格 相当于java的trim*/    str = str.replace(/(^\s*)|(\s*$)/g,'');    /** 在字符串中找到一个子串*/    str.indexOf("string");//第一次出现子字符串的开始位置    str.lastIndexOf("string")//最后一次出现子字符串的起始位置。    /** 替换字串*/    str = str.replace("old","new");    /** 字符串截取*/    str = str.substr(start,end);

5.数字转换成字符串

一般最好用 “” + 1 来将数字转换成字符串

性能上来说：
(“” +) > String() > .toString() > new String()

6.浮点数转换成字符串

parseInt() 是字符串转化成整数，浮点数转换应该用Math.floor()或者Math.round()

7.各种类型转换 & 多个类型声明

所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间

    var myVar = "3.14159",        str = "" + myVar, //  to string          i_int = ~ ~myVar,  //  to integer          f_float = 1 * myVar,  //  to float          b_bool = !!myVar,  /*  to boolean - any string with length                                 and any number except 0 are true */        array = [myVar];  //  to array

8.插入迭代器

    var name = values[i]; i ++;    //可以写成    var name = values[i ++];

9.条件分支

• 将条件分支，按可能性顺序从高到低排列：可以减少解释器对条件的探测次数
• 在同一条件子的多（>2）条件分支时，使用switch
• 使用三目运算符替代if条件分支 例：

        if (a > b) {            num = a;        } else {            num = b;        }        //可以替换为：        num = a > b ? a : b;

10.巧用 || 和 && 布尔运算

        function eventHandler(e) {            if (!e) e = window.event;        }        //可以替换为：        function eventHandler(e) {            e = e || window.event;        }        if (myobj) {            doSomething(myobj);        }        //可以替换为：        myobj && doSomething(myobj);

11.refs 使用

    <MButton        ref="myRef"    />    //替换成    <MButton        ref={ref => {this.myRef = ref;}}    />

12.render中的方法 提前bind

在每次 render 过程中， 再调用 bind 都会新建一个新的函数，浪费资源.

    class extends React.Component {        onClickBtn() {        // do stuff        }        render() {            return <MButton onClick={this.onClickBtn.bind(this)} />        }    }  //替换成    class extends React.Component {        constructor(props) {            super(props);            this.onClickBtn = this.onClickBtn.bind(this);        }        onClickBtn() {        // do stuff        }        render() {            return <MButton onClick={this.onClickBtn} />        }    }