react初学

01react的项目搭建

npm install -g create-react-app 安装react工具脚手架
sudo npm install -g create-react-app mac电脑安装脚手架（过滤权限问题）
create-react-app my-new-app 创建项目
cd 进入项目
npm init 初始化(新版不需要了)
npm install --save react react-dom 导入react和react-dom（新版不需要了）
npm install --save react-router-dom react路由（新版本不需要了）
npm start

01class类与原型对比

1 原型
function Person(name,age){
//实例属性，通过实例点出来的是实例属性
this.name = name;
this.age = age;
}
const p1 = new Person(“狗”,3);
console.log(p1);
//1.1静态属性，在实例new之后是获取不到的.通过构造函数点出来的是静态属性
Person.info = “aaa”;
console.log(p1.info);// undefined
//1.2 如果想被调用，就用实例方法
Person.prototype.say=function(){
console.log(“bbbbbb”)
}
p1.say();//bbbbbb
// 1.3 静态方法
Person.show = function(){
console.log(“showshow”)
}
p1.show();//is not defined 实例获取不到
Person.show();//showshow

2 class类
class Animal{
//作用：每当new一个实例的时候，首先进入构造器
constructor(name,age){
this.name = name;
this.age = age;
}
//在class内部通过static修饰的九四静态属性
static info = “aaa”;
//动物的实例方法
say(){
console.log(‘bbb’);
}
//静态方法
static show(){
console.log(‘showshow’)
}
}
const a1 = new Animal(‘大黄’,3);
console.log(a1.name);//大黄 //实例属性
// 2.1 //静态属性不能用实例获取
console.log(a1.info);//undefined
console.log(Animal.info);//aaa //静态属性
// 2.2 实例方法
a1.say();
//2.3 静态方法
Animal.show();//showshow
a1.show();//is not defined //获取不到

02class继承父类

class Person {
constructor(name,age){
this.name = name;
this.age = age;
}
sayHellow(){
console.log(“大家好”)
}
}

//1.继承了父类的方法属性，子类就不需要多写一遍父类的constructor
class American extends Person{
constructor(name,age){
super(name,age);//用extends调用父级，需要在constructor内写super，super代表父类构造器
}
}
const a1 = new American(“name”,18);
a1.sayHellow();

// 2.同上,多一个特殊类的参数
class Chinese extends Person{
constructor(name,age,IDNumber){
super(name,age);
this.IDNumber = IDNumber;
}
}
const c1 = new Chinese(“name2”,20);
c1.sayHellow();