React入门篇

根据y总的web课程写的系列文章，欢迎大家来我的博客看看，并分享交流，觉得不错的话关注一下啦，谢谢！！
我的博客

背景引入

react作为新一代的前端框架，其生态已经十分丰富，甚至在新一代的react框架开发中又不失传统用vue开发的简洁，在国外大型互联网公司普及较深，我相信在未来国内也会将react框架的开发作为主流，甚至将与vue框架平起平坐。因此，我认为不管你是做前端开发的之前没有了解过react，还是做后台服务器端开发想要自己快速上线一个完整的项目或者是当一个架构师的作用，都应该来学习一下react的知识。

简介

定义

React 是一个用于构建用户界面的 JavaScript 库。它将对象的事件、数据、逻辑封装成一个对象，并且将网站的dom树复制一遍放在细腻的dom树里面去维护。

特性

• 采用组件化模式，声明式编码，提高开发效率和组件复用性
• 数据驱动
• 使用babel将jsx编译为js运行在浏览器里
• index.js是整个项目的入口 ，用来渲染组件
• 使用渲染虚拟dom树的方法，提升性能

下载安装

更改镜像源

首先需要下载一个gitbash（是一个windows上的终端，官网无脑下载即可）

然后输入命令npm config get registry查看镜像源，发现是国外的镜像源，下载速度很慢。

输入npm config set registry更改到淘宝的镜像源，下载速度会加快很多。

安装React

输入指令npm -i -g create-react-app进行安装
输入指令create-react-app -V查看版本号

如何创建一个项目

• 可以先创建一个文件夹用来存储我们所有的react项目文件,起名为:React
• 在文件夹中打开gitbash,输入指令create-react-app ** *-app，通配符是自己起的名字
• 创建完成后会提示 Happy hacking
• 使用Vs-code打开我们创建号的文件,使用按键ctrl \~召唤出我们的终端，输入指令npm start启动我们的项目
• React项目中使用的语言为jsx,可以理解为一种js和html结合的语言，被Babel 编译成为标准的js语言进行编译

重要的ES6的语法糖

bind函数的使用

在JavaScript中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。

使用bind()函数绑定this取值，举个例子：

const person={
  name:"dyf",
  talk: function(){
    console.log(this);
  }
}

person.talk();//this 指代person

// const talk=person.talk;
// talk();//this指代window

const talk=person.talk.bind(person);//绑定this的值
talk();

假如不用bind函数来绑定的话，this就会指代window对象而不会指代我们定义的person。

箭头函数的简写方式

我们都知道在javascript中函数的箭头式写法在开发中很常用因为十分简洁

const f = (x) => {
  return x * x;
};

可以简写为：

const f = x => x * x;

还有一个重点就是箭头函数不重新绑定this的取值，怎么理解呢？就是使用箭头函数后，就不需要用bind函数重新绑定this的值了，会直接指代上面定义的对象，因此十分推荐使用箭头函数的写法。

const person ={
  talk:function(){
    setTimeout(()=>{
      console.log(this);
    },1000);
  }
}
// 用箭头函数后不重新绑定this的取值，向上找this就是指代person
person.talk();

对象的解构

解构操作其实就是将定义好的对象中的值直接取出来使用，而不用再从对象那一级开始调用，是简化代码的方式。

const person={
  name:"dyf",
  age:18,
  height:100,
}
//对象的解构写法
//可以直接取别名输出 
const  {name:new_name ,age} = person;//获取一些对象的属性
console.log(new_name);
console.log(age);

数组和对象的展开

用英文的…就能将定义好的对象或者是数组进行展开渲染，需要注意的是，展开是一种浅拷贝，是将原来的对象或者数组复制了一份，而不是渲染原来的对象。

let a= [1,2,3];
let b=[4,5,6];
let c=[...a,...b,7,8,9];

console.log(c);

let a = [1, 2, 3];
let b = [...a];  // b是a的复制
let c = [...a, 4, 5, 6];

const a={
  name:"dyf"
}

const b={
  age:18
}

const c={...a,...b,height:80}
console.log(c);

Named 与 Default exports

• Named Export：可以export多个，import的时候需要加大括号，名称需要匹配
• Default Export：最多export一个，import的时候不需要加大括号，可以直接定义别名

import  MyPlayer ,  { id as id2}  from "./player";

let player=new MyPlayer();
console.log(player,id2);

export  default class Player{
    constructor(){
        console.log("new player");
    }
}

let id=2
export{
    id
}

上述例子中，id在引入时就不能改名字且要加上大括号，需要用as起一个别名，而使用default关键字导出Player就可以直接改名引入并且不需要加上大括号。

fiter函数

作用

在开发中是一个十分常用的函数，创建一个新的数组对原数组进行过滤，用来判断以及保留符合条件的

不会对空数组进行检测、不会改变原始数组

语法

Array.filter(function(currentValue, indedx, arr), thisValue)

其中，函数 function 为必须，数组中的每个元素都会执行这个函数。

且如果返回值为 true，则该元素被保留； [HTML_REMOVED]

函数的第一个参数 currentValue 也为必须，代表当前元素的值。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let res = nums.filter(num => (
   num >= 5 )
);

console.log(res);  // [6, 7, 8, 9, 10]

写在最后

本篇主要是讲解了如何理解react、快速安装创建一个react项目，以及一些在后面开发中会用到的es6语法糖的知识点。
在下一篇博客中，会讲解组件如何使用的知识，以及多个组件中，如何传递信息的原生方法。