react学习历程1——箭头函数

写在前面：老同事推荐学习react，说这个框架比vue更加适合测试人员使用，于是开始了react学习之旅。另外下面所以理解全部为自己的理解，可能有误哈

基础语法：

(variables)=>{statements}

正常的函数定义如下：

function myfunc(variables){
    statements
}

箭头函数，顾名思义，就是正常函数的简化写法，因为我是python出身，感觉和python中的lambda声明的匿名函数类似，可以使用变量进行接收，然后如果需要使用，可以调用变量

实际举个例子，遍历人名数组，如果人名的长度小于3，就返回错误提示，其他的正常返回人名（初学，忽略优化bug哈）

    const materials = ['yaoming', 'geyou', 'auther', 'a', 'o'];
    //()=>{},map遍历，前面是遍历元素定义的变量名，后面是需要返回的逻辑体
    document.getElementById('demo').innerHTML = materials.map(material => {
        if (material.length < 3) {
            return "error<br/>";
        } else {
            return material+'<br/>';
        }
    });

这里有一个注意点，当入参只有一个的时候，小括号可以省略；当出参只有一个的时候，大括号+return可以省略。当然函数是可以没有return，但statements

const materials=['yaoming','zhugeliang','liubei'];
document.getElementById('demo').innerHtml=materials.map(material=>material.length);

this，正常函数中如果使用this就是指向自己，箭头函数的特殊之处在于，他没有this，所以在函数内部使用箭头函数就可以直接使用this来正常使用函数属性了

    function Persion() {
        //注意，var定义的变量不是Persion属性，可以理解为局部变量，属性必须使用this
        this.age = 0;
        var f = () => {
            this.age++;
        };
        f();
        document.getElementById('demo').innerHTML = this.age;
    }
    var p = new Persion();
    p.age += 10;
    document.getElementById('demo1').innerHTML = p.age;

还是说到python中的匿名函数，不需要重复使用该函数的时候，才会选择使用匿名函数，如果需要被复用的函数，我们并不会选择去定义匿名函数，哪怕可以用变量接收，然后达到复用的目的。相同的，箭头函数在需要复用的时候，同样不推荐使用箭头函数。而且箭头函数不适用call和apply，下面解释一下call和apply

<script>
    data1 = {a: 1, b: 2};
    data2 = {a: 11, b: 22};

    function add(c) {
        return this.a + this.b + c;
    }
    //call和apply作用其实一样，区别只是接收参数的数据格式不一致罢了
    document.getElementById('demo1').innerHTML = add.call(data1, 8);
    document.getElementById('demo2').innerHTML = add.apply(data2, [8]);
</script>