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} />
        }
    }