学完React之后，给初学React的小伙伴一些建议

　　现在市面流行的两大框架React和Vue，学过这两个框架的小伙伴，大部分人应该都会有一个共识，那就是React比Vue难学。因此这里给一些，本人学习完react时一点心得，希望能给小伙伴带来用处。

　　在学习React时，给我最大的印象就是JS的基础很重要，如果JS基础不好，在学习React时会比较吃力，不懂一些特定写法的原因（例如：绑定React合成事件时，需要传参时要使用bind ）。这里就介绍一些，个人认为学React时，需要熟练掌握的知识点。

1. JS存储数据

　　首先，我们先复习下JS的数据类型：

• 栈：原始数据类型（Undefined、Null、Boolean、Number、String）

• 堆：引用数据类型（对象、数组和函数）

 

　　我们结合下面的图来看一下，原始数据的值直接存放在栈里面，因此 var b = age ，本质上就是 var b = 24 (仅限下图的情况)，我们在修改b和age的值时，两者互不影响。但对于引用类型来讲，存储在栈中的数据是person1和person2 的引用地址，所以 var a = person2 ，其实是把 preson2 的引用地址赋给了 a，那么a和person2对应的是同一份数据。如果我们修改了a的数据，那么person2的数据也会随之改变。与之相关的知识点：深浅克隆。

　   

2. JS中函数和函数返回值

　　这一块比较简单就是想让大家知道函数与函数调用的区别，大家需要牢记的第一点就是函数和函数返回值是两码事，从下图我们可以很快的看出test的类型是function，test()是string，这里再提一次 函数和函数返回值是两码事，在这里test 函数返回了'I am Test Func Result' 明显是一个string，当然也可以返回任意一种数据类型。这一块对应的就是React绑定事件时，绑定的是一个函数。所以就会有绑定事件传参时需要使用bind。

3. JS中 this的指向

　　首先我们要牢记两点：

　　　　1：this永远指向一个对象或者是undefined；

　　　　2：this的指向完全取决于函数调用的位置；

 　　接下来是this的指向（不涉及严格模式）：

　　　　1.以函数形式调用，this就是指向window（全局）

　　　　2.以方法形式调用，this就是指向调用方法的那个对象

　　　　3.构造函数中，this就是指向构造函数的实例

 

　　　　4.使用call、apply和bind调用时，this是指定的那个对象。

　　　　5.ES6 箭头函数( => )下，this是静态的，this始终指向函数声明时所在作用域下的this值，简单来说使用箭头函数的this为函数外层的this。

 

 

　　结合React讲解下this，在此之前先告诉大家，react-dom开启了JS的严格模式。不过不用担心，开启了严格模式，我们也可以搞懂this指向，这里只讨论React Component（类组件）。

 

　　先了解这一点，开启了严格模式，以函数形式调用this，this指向的是undefined，如果是使用箭头函数则还是遵守第5点。

function test1(){
   console.log('test1 this----',this); // test1 this---- window
}

function test2(){
   "use strict";
   console.log('strict test2 this----',this);  // strict test2 this---- undefined
}

var test3 = ()=>{
    "use strict";
    console.log('strict test3 this',this); // strict test2 this---- window
}

　所以我们在React Component中声明方法时，需要采用箭头函数，不然的话，我们会找不到this，也就是当前的组件。而绑定事件的时候需要加上this，因为我们定义的方法全在组件身上，想要使用方法就必须要从组件身上拿。

　

 

 

 

 

　　

4. JS中 apply call bind 的用法和区别

　　首先，简单介绍下它们的作用：它们有一个共同的作用就是可以改变函数调用时this的指向，接下来就是它们一些小差异了。

　　call　　传递参数是一个一个传递的。

　　apply　传递参数是一个数组。

　　bind 　传递参数也是一个一个传递的，但bind返回了一个函数，所以我们要调用后才能看到打印的信息。

function person(name, age) {
        this.name = name;
        this.age = age;
        this.speak = function (food, game) {
          console.log(
            `name--${this.name},age---${this.age},like---${food} and ${game}`
          );
        };
　}
      var a = new person("aaa", 24);
      var b = new person("bbb", 22);
      a.speak("milk", "cf");              // name--aaa,age---24,like---milk and cf
      a.speak.call(b, "apple", "lol");    // name--bbb,age---22,like---apple and lol
      a.speak.apply(b, ["apple", "lol"]); // name--bbb,age---22,like---apple and lol
      a.speak.bind(b, "apple", "lol")();  // name--bbb,age---22,like---apple and lol

标签：---,函数,age,小伙伴,JS,React,学完,name
来源： https://www.cnblogs.com/akei/p/15628566.html