（二）React的组件的创建 ，js类的基础复习

（二）React的创建组件

简介组件化和模块化

模块：
1.理解：向外提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3.作用：复用js, 简化js的编写, 提高js运行效率
组件：
1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件： 一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 提高运行效率
模块化:
1.当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化:
2.当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

函数式组件

创建函数式组件：

<script type="text/babel">
		//1.创建函数式组件
		function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/
	</script>

类式组件

复习js类的知识

1.js创建类：

//创建类
class Person（）{
  	//构造器方法
   constructor(name,age){
    //构造器中的this是类的实例对象
    this.name = name;
    this.age = age
   }
   //一般方法
   speak(){
       //spaek的方法放在了哪里? 类的原型对象上
       //speak给实例用的
       //this指的是谁调用的 通过person实例调用时 this指的是person实例
       console.log('我是${this.name},我的年龄是${this,age}')   
   }
}
const P1 = new Person('tom',18)
P1.speak()
console.log(P1)

2.增加类的属性 不一定要在构造方法中 可以直接在类里面直接写：

class Car() {
    constructor(name,price){
    	this.name = name
     	this.price = price
    }
//类中可以直接写赋值语句
    a = 1 //可以直接显示在这个类的相应属性上
}

3.继承的相关知识：

//创建一个studen类 继承与Person类
//继承的方法会继承构造器 要有自己的属性还要写构造器 但是要写super 为什么 就是因为要调用父类的构造器
class Studen extends Person(){
            constructor(name,age,grade){
                super(name,age)
                this.grade = grade
                this.school = '尚硅谷'
            }
            //重写从父类继承过来的方法
            speak(){
                console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
                this.study()
            }
            study(){
                //study方法放在了哪里？——类的原型对象上，供实例使用
                //通过Student实例调用study时，study中的this就是Student实例
                console.log('我很努力的学习');
            }
}

4.类的总结：

1.类中的构造器不是必须写的，要对实例进行初始化的操作时，比如添加属性的时候
2.如果A类继承了B类 ，且A类写了构造器，那么A类构造器中的super是必须要调用的
3.类中的定义的方法，放在了类的原型对象上，供实例使用

创建类式组件（常用的）

//创建组件
class MyComponent extends React.Component(){
    render(){
                //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
                //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
                console.log('render中的this:',this);
                return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
            }
}
//2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 
            执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
                    1.React解析组件标签，找到了MyComponent组件。
                    2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
                    3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
        */```